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Android 开 发 教程 
Android 是 一 个 开源 的 ， 基 于 Linux 的 移动 设备 操作 系统 ， 如 智能 手机 和 平板 电脑 。 
Android 是 由 开放 手机 联盟 和 谷歌 的 带领 下 与 其 他 公司 开发 的 。 


Android 提供 了 一 个 统一 的 应 用 程序 开发 方法 ， 这 意味 着 开发 人 员 只 需要 开发 
Android， 并 且 他 们 的 应 用 程序 应 该 能 够 运行 在 不 同 搭载 Android 移 动 设 备 。 

谷歌 在 2007 年 发 布 第 一 个 商业 版 本 的 Android1.0， 发 布 于 2008 年 9 月 发 布 了 第 一 个 
测试 版 本 的 Android 软 件 开发 工具 包 (SDK). 


2012 年 6 月 27 日 ， 在 谷歌 1/ OQ 大 会 上 ， 谷 歌 宣 布 发 布 了 Android 版 本 4.1 Jelly 

Bean, Jelly Bean 是 一 个 渐进 的 更 新 ， 改 进 用 户 界面 为 主要 目的 ， 无 论 是 在 功能 和 
性 能 方面 。 

Android 源 代码 是 根据 自由 和 开放 源码 软件 许可 证 。 谷 歌 发 布 的 大 部 分 代码 根据 
Apache 许 可 证 2.0 版 ，Linux 内 核 的 变化 根据 GNU 通 用 公共 许可 证 版 本 2。 


Android 的 特点 


Android 是 一 个 功能 强大 的 操作 系统 与 葵 果 4GS 竞 争 ， 并 支持 强大 的 功能 。 少 数 几 
种 功能 列举 如 下 : 


特点 描述 
漂亮 的 U| ，Android 操 作 系 统 的 基本 屏幕 提供 了 一 个 美丽 而 直观 的 用 户 界面 。 
连通 性 GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth, Wi-Fi, 

LTE, NFC 和 WiMAX. 
存储 使 用 SQLite 轻 量 的 关系 数据 库 ， 用 于 数据 存储 目的 。 
媒体 支持 H.263, H.264, MPEG-4 SP, AMR, AMR-WB, AAC, HE-AAC, AAC 
: 5.1, MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, 和 BMP 

短信 /消息 ”SMS 和 MMS 
Web 浏 览 基于 开源 的 WebKit 布 局 引擎 ， 再 加 上 支持 HTML5 和 CSS3 
器 Chrome 的 V8 JavaScript 引 擎 。 
多 点 触 控 Android 已 经 多 点 触 控 ， 它 最 初 获得 手机 提供 原生 支持 ， 如 HTC 

Aes Hero, 
Multi- 用 户 可 以 跳 从 一 个 任务 到 另 一 个 任务 ， 并 且 相 同时 间 可 以 同时 运 
tasking 行 各 种 应 用 。 
Resizable ”Widgets 是 可 调整 大 小 ， 这 样 用 户 就 可 以 扩大 更 多 的 内 容 或 缩小 以 
widgets 节省 空间 
Multi- 
anaE 支持 单 向 和 双向 文本 。 
GCM 谷歌 云 消息 (GCM) 是 一 种 服务 ， 让 开发 人 员 发 送 短 消 息 数据 ， 

对 Android 设 备 的 用 户 ， 而 无 需 专 有 的 同步 解决 方案 。 

Wi-Fi 一 种 技术 ， 可 以 让 应 用 程序 发 现 和 对 直接 通过 高 带宽 的 对 等 网 络 
Direct 连接 。 
Android 一 个 流行 的 基于 NFC 的 技术 ， 使 用 户 能 够 即时 共享 ， 只 需 通 过 触 
Beam 摸 NFC 功 能 将 两 个 手机 连 在 一 起 。 


Android 应 用 程序 


通常 在 Java 语 言 中 使 用 Android 软 件 开 发 工具 包 开 发 Android 应 用 程序 。 


系统 开发 出 来 以 兵力 ，Android 应 用 程序 可 以 轻松 地 打包 和 销售 商店 ， 可 以 通过 如 
谷歌 播放 或 亚马逊 Appstore。 


Android 在 世界 各 地 190 多 个 国家 数 以 百 万 计 的 移动 设备 。 这 是 任何 移动 平台 和 快速 
增长 的 最 大 的 安装 基础 。 全 球 每 天 有 超过 100 万 个 新 的 Android 设 各 被 激活 。 


本 教程 目的 是 教 你 如 何 开发 并 将 Android 应 用 程序 打包 。 我 们 将 从 Android 应 用 程序 
编程 环境 设置 开始 ， 然 后 是 Android 各 个 方面 的 应 用 程序 。 
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Android 应 用 程序 开发 可 以 用 以 下 操作 系统 开发 : 
e Microsoft Windows XP 或 更 高 版 本 。 
e Mac OS X10.5.8 或 更 高 版 本 (RRDA) 。 
e 包括 GNU C 库 2.7 或 更 高 版 本 的 Linux 系 统 。 


第 二 是 开发 Android 应 用 程序 所 需 的 所 有 工具 都 是 免费 的 ， 可 以 从 网 上 下 载 。 以 下 
是 软件 的 列表 ， 开 始 Android 应 用 程序 编程 需要 用 到 。 


e Java JDK5 或 JDK6 

e Android SDK 

e Eclipse IDE for Java Developers (optional) 

e Android Development Tools (ADT) Eclipse Plugin (optional) 


这 里 最 后 两 个 组 件 是 可 选 的 ， 如 果 正 在 使 用 Windows 这 些 组 件 容 易 获 得 ， 都 是 基于 
Java 应 用 程序 开发 。 因此 ， 让 我 们 来 看 看 如 何 进 行 设 置 所 需 的 环境 。 SE: 如 果 你 觉 
得 以 下 步骤 比较 复杂 ， 那 么 可 以 直接 使 用 android 开发 软件 集成 包 : adt-bundle- 

idi (自行 搜索 ) 


第 1 步 - 安 丢 Java 开发 工具 包 (JDK) 


可 以 下 载 最 新 版 本 的 Java JDK， 从 Oracle 的 Java 网 站 : Java SE 下 载 。 安 装 下 载 的 
JDK 文 件 ， 按 照 给 定 的 说 明 来 安 芝 和 配置 设置 。 最 后 设置 PATH 和 JAVA_HOME 环 境 
变量 来 引用 该 目录 包含 javac 和 java， 通 常 分 别 为 java_install_dir/bin 和 

java install dir, 


如 果 运 行 的 是 Windows， 把 JDK 安 装 在 C:jdk1.6.0_ 15, 4 C:autoexec.bat 文件 添加 
以 下 内 容 : 


set PATH=C:jdk1.6.0_15in;%PATH% 
set JAVA HOME-C: jdk1.6.0 15 


另外 ， 也 可 以 右键 单 击 "我 的 电脑 ”， 选择 “属性 ”=》 ”高 级 “=》 “环境 变量 ”， 按 下 “ 确 
定 " 按 钮 ， 然 后 会 更 新 PATH 值 。 


在 Linux 上 ， 如 果 SDK 安 装 在 /usr/local/jdk1.6.0_15， 如 果 使 用 的 是 C shell， 把 下 面 
的 代码 到 .cshrc 文 件 。 


setenv PATH /usr/local/jdk1.6.0 15/bin:$PATH 
setenv JAVA HOME /usr/local/jdki1.6.0 15 


另外 ， 如 果 使 用 Eclipse 集成 开发 环境 (IDE) ， 那 么 它 会 自动 知道 已 安装 Java。 


第 2 步 - 安装 Android SDK 


可 以 下 载 最 新 版 本 的 Android SDK， 从 Android 官方 网 站 : Android SDK 下 载 。 如 果 
Windows 机 器 上 安装 SDK， 那 么 会 发 现 一 个 installer_rXX windows.exe 文 件 ， 只 需 
下 载 并 运行 这 个 EXE 将 推出 Android SDK 工 具 安 装 向 导 来 指导 整个 的 安装 ， 所 以 只 
要 按照 指示 安装 。 最 后 ， 必 须 在 机 器 上 安装 Android SDK IA, 


本 教程 使 用 的 是 Windows 7 操作 系统 环境 。 


因此 ， 让 我 们 打开 Android SDK 管理 器 中 的 选项 ， 所 有 程序 “>”Android SDK 工具 > 
SDK 管 理 器 ， 这 会 给 定 下 面 的 窗口 : 
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Done loading packages VAL 4 OS 


打开 SDK 管 理 器 后 ， 它 需要 点 时 间 来 安装 其 他 所 需 的 软件 包 。 默 认 情 况 下 ， 它 会 列 
出 共 7 个 要 安装 的 软件 包 ， 但 建议 选择 为 Android SDK 文档 和 SDK 包 的 样 例 代 码 ， 
以 减少 安装 时 间 。 下 一 步 点 击 安装 包 按钮 继续 进行 ， 这 将 显示 以 下 对 话 框 : 


Packages - _ Package Description & License 

w Android SDK Platform-tools, revision asl " 
Dependencies 
v Documentation for Android SDK, API... This package is a dependency for: 
v SDK Platform Android 4.1, API 16, revi... - Android SDK Tools, revision 20 
v Samples for SOK API 16, revision 1 
Archive Description 

v ARM EABI v7a System Image, Andi. Archive for Windows 
? Google APIs, Android API16, revision 1 Size: 10.6 MiB 
v Sources for Android SDK, API 16, revis... SHAI: 74e2605569474ce41b695f78470e5eedd7495255 
? Google USB Driver, revision 6 





Site 
Android Repository (dl-ssl.google.com) 








© Accept Reject 








如 果 同 意 安装 所 有 软件 包 ， 请 选择 接受 所 有 的 单 选 按钮 ， 并 继续 进行 通过 单 

击 “Installbutton”。 现 在 ， 让 SDK 管 理 器 自己 工作 ， 等 待 直 到 所 有 的 包 都 安装 。 这 可 
能 需要 一 些 时 间 ， 这 取决 于 您 的 互联 网 连接 。 所 有 的 包 都 安装 完成 后 ，SDK 管 理 器 
可 以 关闭 ， 使 用 右上 方 的 交叉 按钮 。 


第 3 步 - 安装 Eclipse IDE 


所 有 的 例子 已 经 写 在 本 教程 中 使 用 的 是 Eclipse IDE。 所 以 建议 机 器 上 安装 最 新 版 本 
的 Eclipse。 


安装 Eclipse IDE，http://www.eclipse.org/downloads/ 下 载 最 新 的 Eclipse 二 进 制 文 
件 。 下 载 安 装 : 解压 二 进 制 分 发 到 一 个 方便 的 位 置 。 例 如 ， 在 C:eclipse， 或 
lusr/local/eclipse 在 Linux 并 适当 设置 PATH 变量 。 


Eclipse 可 以 启动 Windows 机 器 上 执行 以 下 命 舍 ， 或 者 可 以 简单 地 双击 eclipse.exe 


?6C : eclipseeclipse.exe 


Eclipse 可 以 启动 Linux 机 器 上 执行 以 下 命令 : 


$/usr/local/eclipse/eclipse 


成 功 启动 后 ， 如 果 一 切 正 常 ， 那 么 它 应 显示 以 下 结果 : 
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Bie Edt Navigate Search Project Bun Window Hep 
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© Connect My 
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testa [2 Properties | 4ib Servers | BE Data Source Explorer | 25 Snippets [2 Console| DW Bookrnerks| w-"-n 








第 4 步 - 安装 Android 开 发 工具 (ADT) 插件 


这 个 步骤 将 设置 Android 开发 工具 Eclipse 插件 。 让 我 们 开始 打开 Eclipse， 然 后 选 
+ Help > Software Updates > Install New Software"。 这 将 显示 以 下 对 话 。 
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Select a site or enter the location of a site. 
Work with: type or select a site 


type filter text 





Name ADT Plugin 


Location: hitps://dl-ssl. google. com/android/eclipse 
©) 





|J! Contact all update sites during install to find required software 








o 





现在 ， 使 用 "Add "按钮 来 添加 名 称 和 ADT 插 件 的 位 置 https://dl- 
ssl.google.com/android/eclipse/ 。 然 后 单 击 “确定 ?添加 这 个 位 置 ， 只 要 单 击 "OK "IX 
钮 ， 添 加 这 个 位 置 时 ，Eclipse 开 始 搜索 插件 在 给 定 的 位 置 ， 最 后 列 出 找到 的 插件 。 








Find more software by working with the “Available Software Sites” preferences. 
type filter text 


Name 
ig. © Developer Tools 
Ig. 8 NDK Plugins 


[J| Show only the [atest versions of available software | Hide items that are already installed 
V. Group stems by category What is alceedy installed? 

E Show only software applicable to target environment 

|J! Contact all update sites during install to find required software 





© 
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现在 ， 选 择 列 出 的 所 有 插件 使 用 "Select Al 按钮， 并 单 击 “Next "按钮 ， 将 引导 提前 
安装 Android 开 发 工具 和 其 他 所 需 的 插件 。 


第 5 步 - 创建 Android 虚 拟 设 各 


为 了 测试 Android 应 用 程序 ， 需 要 一 个 虚拟 的 Android 设 备 。 所 以 ， 在 我 们 开始 之 
前 ， 在 代码 创建 一 个 Android 虚拟 设备 。 打 开 Android AVD 管 理 使 用 Eclipse 菜单 选 
项 Window > AVD Manager» Rt & 4 Android AVD 管 理 。 使 用 "New” 按 钮 ， 创 建 一 
个 新 的 Android 虚 拟 设备 ， 并 输入 以 下 信息 ， 然 后 点 击 "Create AVD" 按 钮 。 






Name AndroidPhone 

















Sal Target | Android 4.1 - API Level 16 












| List of existing Android V|| CPU/ABE | ARM (armeabi-v7a) 








AVD Name SD Card: 


9 Size: 16 


File: 






Snapshot: 
Enabled 


Slan: 





© Built-in: Default (WVGA800) 


Resolution: 


Hardware 








Property 
Abstracted LCD density 240 
Max VM application hea... 48 

Device ram size 










| 
w À valid Android Virtu! 
X An Android Virtual D 





如 果 AVD 创 建成 功 ， 这 意味 着 Android 应 用 程序 开发 环境 已 经 配置 完成 。 使 用 右上 
角 的 十 字 按 钮 关闭 此 窗口 。 最 好 重新 启动 计算 机 ， 一 旦 完成 了 这 最 后 一 步 ， 就 可 以 
准 各 进行 第 一 个 Android 例 子 了 ， 但 在 此 之 前 ， 我 们 将 看 到 Android 应 用 开发 相关 的 
一 些 比较 重要 的 概念 。 
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Android 操 作 系统 是 一 个 堆栈 的 软件 组 件 ， 它 大 致 分 为 五 个 部 分 和 四 个 主要 层 的 体 
系 结构 ， 如 下 图 所 示 。 


Applications 





Linux 内 核 
在 层次 的 底部 是 Linux - Linux 2.6。 它 提供 基本 的 系统 功能 ， 如 进程 管理 ， 内 存 管 


理 ， 设 备 管理 ， 如 : 相机 ， 键 盐 ， 显 示 器 等 内 核 义理 的 事情 ，Linux 确实 不 错 ， 如 
网 络 设备 驱动 程序 比较 多 ， 内 搭 外 围 硬 件 接口 。 


程序 库 
在 Linux 内 核 之 上 ， 有 一 个 组 库 ， 包 括 开 放 源 码 的 Web 浏 览 器 引擎 WebKit，libc 


库 ，SQLite 数 据 库 ， 这 是 一 个 非常 有 用 的 库 ， 用 于 存储 和 共享 点 用 程序 数据 ， 播 放 
和 录制 音频 和 视频 ，SSL 库 负责 互联 网 安全 等 。 


Android 运 行 时 


这 是 体系 结构 第 三 个 部 分 并 在 第 二 层 之 上 由 底部 提供 。 本 节 提 供 了 一 个 关键 的 组 
件 ， 叫 做 Java 虚 拟 机 ， 是 一 种 专门 设计 和 优化 的 Android Dalvik 虚拟 机 。 


Dalvik 虚 拟 机 使 用 的 Linux 核 心 功能 ， 如 内 存 管 理 和 多 线程 ， 在 Java 语 言 中 是 内 在 
的 。 Dalvik 虚 拟 机 将 每 一 个 Android 应 用 程序 运行 在 自己 的 进程 中 ， 使 用 Dalvik 虚 拟 
机 实例 。 


Android 还 提供 了 一 组 核心 库 ， 使 Android 应 用 程序 开发 人 员 使 用 标准 的 Java 编 程 语 
言 编写 Android 应 用 程序 。 


应 用 程序 框 洋 


应 用 程序 框架 层 使 用 Java 类 形式 的 应 用 程序 提供 了 许多 的 更 高 级 别 的 服务 。 人 允许 应 
用 程序 开发 人 员 在 其 应 用 程序 中 使 用 这 些 服务 。 


应 用 


在 最 上 层 ， 即 所 有 的 Android 应 用 程序 。 一 般 我 们 编写 的 应 用 程序 只 被 安装 在 这 
层 。 应 用 的 例子 如 : 浏览 器 ， 游 戏 等 。 


Android 应 用 组 件 - Android 开 发 教程 


应 用 组 件 是 一 个 Android 应 用 程序 的 基本 构建 块 。 这 些 组 件 是 松 耦 合 的 点 用 程序 清 
单 文件 AndroidManifest.xml 中 介绍 了 每 种 组 件 的 应 用 程序 ， 以 及 它们 如 何 相 互 作 
用 。 


有 以 下 四 个 主要 组 成 部 分 ， 可 用 在 一 个 Android 应 用 程序 : 
组 件 描述 
Activities 他 们 决定 了 用 户 界面 和 人 处理 用 户 交互 ， 智 能 手机 的 屏幕 
Services 他 们 处 理 与 点 用 程序 相关 的 后 台 人 处 理 。 


Broadcast Receivers ”他 们 处 理 的 Android 操 作 系 统 和 应 用 程序 之 间 的 通信 。 
Content Providers 他 们 处 理 的 数据 和 数据 库 管理 方面 的 问题 。 





Activities 


一 个 活动 (activity) 表示 一 个 单一 的 屏幕 上 的 用 户 界 面 。 例 如 ， 电 子 邮 件 应 用 程序 
可 能 有 一 个 活动 ， 显 示 新 的 电子 邮件 列表 ， 另 一 个 活动 ， 撰 写 电 子 邮 件 ， 阅 读 电 子 
邮件 和 其 他 活动 。 如 果 应 用 程序 有 一 个 以 上 的 活动 ， 然 后 其 中 一 人 应 标记 为 活动 启 
动 应 用 程序 时 提出 。 


被 实现 为 一 个 活动 Activity 类 的 子 类 ， 如 下 : 


public class MainActivity extends Activity { 


j 


Services 


服务 是 一 种 在 后 台 运 行 的 组 件 来 执行 长 时 间 运 行 的 操作 。 例 如 ， 一 个 服务 可 以 在 后 
台 播 放 音 乐 ， 而 用 户 在 不 同 的 应 用 程序 ， 或 者 它 可 能 通过 网 络 获取 数据 ， 而 不 阻塞 
用 户 交 互 与 活动 。 


实现 一 个 service 作 为 一 个 服务 类 的 子 类 如 下 : 


public class MyService extends Service ( 


j 


广播 接收 器 


广播 接收 机 简单 地 响应 从 其 他 应 用 程序 或 从 系统 广播 消息 。 例 如 ， 应 用 程序 也 可 以 
发 起 广播 ， 以 让 其 他 应 用 程序 知道 某 些 数据 已 经 被 下 载 到 设备 上 ， 可 供 他 们 使 用 ， 
所 以 这 是 广播 接收 器 ， 会 拦截 此 通信 ， 并 会 采取 适当 行动 。 


广播 接收 机 被 实现 为 BroadcastReceiver 的 类 的 子 类 ， 每 个 消息 被 作为 一 个 Intent 对 
象 广播 


o 


public class MyReceiver extends BroadcastReceiver { 


j 


内 容 提 供 者 


内 容 提供 者 组 件 提供 数据 从 一 个 应 用 到 其 他 要 求 。 ContentResolver 类 的 方法 ， 通 
过 这 样 的 请 求 的 处 理 。 这 些 数据 可 以 被 存储 在 文件 系统 中 ， 数 据 库 或 其 他 地 方 。 


内 容 提供 商 实现 ContentProvider 类 的 子 类 ， 必 须 实施 了 一 套 标 准 的 APl， 使 其 他 应 
用 程序 来 执行 交易 的 。 
public class MyContentProvider extends  ContentProvider { 


j 
我 们 将 通过 这 些 标 签 酒 盖 应 用 程序 组 件 的 细节 ， 同 时 在 单独 的 章节 。 


附加 组 件 


ea 它们 的 逻辑 以 及 它们 之 间 的 连 线 构造 。 这 些 组 件 
包括 : 


组 件 描述 
Fragments 表示 的 行为 或 在 活动 中 的 用 户 界 面 的 一 部 分 。 
Views 绘制 的 屏幕 上 的 按钮 的 UI 元 素 ， 列 表 形 式 等 。 
Layouts 查看 层次 结构 ， 控 制 屏幕 格式 和 外 观 视图 。 
Intents 消息 连 线 组 件 在 一 起 。 

Resources 外 部 因素 ， 如 字符 串 ， 常 数 和 可 绘制 的 图 片 。 


Manifest 应 用 程序 的 配置 文件 。 
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让 我 们 开始 实际 的 Android 编 程 。 在 开始 使 用 Android SD ie 
必须 确保 设置 正确 的 Android 开 发 环境 - 环境 设置 教程 。 也 假设 你 有 一 点 Eclipse 
IDE 操作 知识 。 


因此 ， 现 在 编写 一 个 简单 的 Android 应 用 程序 ， 它 将 打印 "Hello World!". 


4) 3 Android ;: FA 


第 一 步 : 使 用 Eclipse IDE 创 建 一 个 简单 的 Android 应 用 程序 。 按 照 选择 File -> New - 
> Rn. 最 后 从 向 导 列 表 选 择 Android New Application 。 现 在 ， 应 用 程序 命名 
为 HelloWorld 使 用 向 导 窗 口 如 下 : 


New Android Application 


A The prefix 'com.example.' is meant as a placeholder and should not be used 





Application Name:? HelloWorld] 
Project Name:0 HelloWorld 


Package Name: com.example.helloworld 





Build SDK:0| Android 4.1 (API16) 


Minimum Required SDK:©| API8: Android 2.2 (Froyo) z 


| Choose the lowest version of Android that your application will support. Lower API levels target mor 











[V] Create custom launcher icon 

|. | Mark this project as a library 

[V] Create Project in Workspace 
C:\workspace\HelloWorld 


1 The application name is shown in the Play Store, as well as in the Manage Application list in Settings. 





?) Back Next > Finish F Cancel | 


接 下 来 ， 按 照 所 提供 的 指示 ， 并 保持 所 有 其 他 项 为 默认 ， 守 到 最 后 一 步 。 项 目 创 建 
成 功 后 ， 将 有 以 下 项 目的 画面 : 
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Android 应 用 解剖 


在 运行 应 用 程序 之 前 ， 应 该 注意 在 Android 项 目的 几 个 目录 和 文件 : 
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TutorialsPoint 移动 端 教程 


I$ Package Explorer £3 
4 $ HelloWorld 


T» 
4 iB com.example.helloworld 
a ([j] MainActivity java 
4 (9 MainActivity 
@ onCreate(Bundle) : void 


@ onCreateOptionsMenu(Menu) : boolean 
a2 gen [Generated Java Files) 


4 (B com.example.helloworld 
ò [D] BuildConfig.java 
» D) Rjava 
> BA Android 4.1 
> BA Android Dependencies 
2 assets 
» & in < 0 
b E» libs 
4 D» res 
b © drawable-hdpi < (4 
b © drawable-Idpi 
> & drawable-mdpi 
> (e drawable-xhdpi 
4 © layout 
id. activity main.xml 
4 BB menu 
(d) activity main.xml 
4 & values 
3 dimens.xml 
id) strings.xml 
问 styles.xml 
b & values-large 
b & values-v11 
b & values-v14 
回 AndroidManifestxml 
Ae ic launcher-web.png 
[3 proguard-project.txt 


project.properties /ZituLeor 
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文件 夹 、 文 件 和 说 明 


src 这 包含 项 目 java 源 文件 。 黑 认 情 况 下 ， 它 包括 一 个 MainActivityjava 
源 文件 的 活动 类 ， 应 用 程序 运行 时 使 用 的 应 用 程序 图 标 启 动 


gen 这 包含 了 R 文 件 ， 编 译 器 生成 的 文件 在 项 目 中 找到 的 所 有 资源 。 不 
要 修改 这 个 文件 。 


bin 此 文件 夹 包 含 了 Android APK 包 文件 。ADT 在 创建 生成 过 程 中 一 切 
需要 运行 一 个 Android 应 用 程序 


res/drawable-hdpi 被 设计 用 于 高 密度 的 屏幕 可 绘制 的 对 象 目录 
res/layout 这 是 一 个 目录 文件 ， 定 义 应 用 程序 的 用 户 界 面 


res/values 这 是 一 个 目录 ， 包 含 各 种 XML 文 件 ， 其 中 包含 资源 的 集合 ， 
如 字符 串 和 颜色 定义 


AndroidManifest.xml 这 是 文件 列表 ， 该 文件 描述 了 应 用 程序 的 基本 特 
征 ， 并 定义 每 个 组 件 


下 面 的 部 分 将 简要 介绍 一 些 重要 的 应 用 程序 文件 。 


主要 活动 Activity 文件 


主要 活动 代码 是 Java 文 件 : MainActivity.java。 这 是 实际 的 应 用 程序 文件 ， 最 终 被 
转换 Dalvik 可 执行 的 文件 ， 并 运行 应 用 程序 。 以 下 是 默认 的 Hello World 应 用 的 程 
序 向 导 生成 的 代码 : 


packag 


import 
import 
import 
import 
import 


public 


e com.example.helloworld; 


android.os.Bundle; 
android.app.Activity; 
android.view.Menu; 
android.view.MenuItem; 
android.support.v4.app.NavUtils; 


class MainActivity extends Activity { 


@Override 


pu 


blic void onCreate(Bundle savedInstanceState) { 
super .onCreate(savedInstanceState) ; 
setContentView(R.layout.activity main); 


QOverride 
public boolean onCreateOptionsMenu(Menu menu) { 


getMenuInflater().inflate(R.menu.activity main, menu); 
return true; 


在 这 里 ，R.layout.activity_main 是 指 位 于 在 res/layout 文件 夹 的 activity main.xml 
文件 。onCreate() 方 法 是 加 载 一 个 活动 时 ， 被 触发 的 许多 方法 之 一 。 


Manifest 文件 


组 件 是 开发 应 用 程序 的 一 部 分 ， 必 须 声 明 其 所 有 组 件 在 AndroidManifest.xml 中 ， 
应 用 程序 项 目的 根 目 录 在 amanifest 文件 。 此 文件 作为 Android 操 作 系 统 和 应 用 程序 
之 间 的 接口 。 人 例如， 默认 manifest 文件 将 看 起 来 如 以 下 文件 : 


«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package-"com.example.helloworld" 
android: versionCode="1" 
android: versionName="1.0" > 
<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="15" /> 
<application 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android:name="".MainActivity" 
android:label-"Qstring/title activity main" > 
<intent-filter> 
«action android:name="android.intent.action.MAIN" /: 
«category android:name-"android.intent.category.LAU! 
«/intent-filter» 
«/activity» 
«/application» 
</manifest> 


Eal s Be 


这 里 <application>...</application> 标 记 括 起 相关 应 用 程序 的 组 件 。 属 性 
android:icon 将 指向 应 用 程序 图 标 ， 可 在 res/drawable-hdpi 之 下 找到 。 应 用 程序 使 
用 位 于 图 像 绘 制 文件 夹 ， 文 件 名 为 ic_launcherpng 。 


<activity> 标 签 是 用 来 指定 活动 ， 属 性 android:name 指 定 活动 子 类 ，android 类 完全 
限定 android:label 属性 指定 一 个 字符 串 作 为 标签 使 用 的 活动 。 可 以 使 用 <activity> 标 
签 指定 多 个 活动 。 

intent 过 滤器 的 动作 被 命名 为 android.intent.action.MAIN， 表 示 这 个 活动 作为 应 用 
程序 的 入 口 点 。 类 的 意图 过 滤器 是 namedandroid.intent.categoryLAUNCHER 声 
明 ， 应 用 程序 可 以 从 设备 的 启动 图 标 启 动 。 


@string 是 指 strings.xml 文 件 ， 解 释 如 下 。@string/app_name 是 strings.xml 文 件 中 
的 app_name 是 “HelloWorld” 定 义 的 字符 串 。 类 似 的 方式 ， 其 他 的 字符 串 填 充 到 应 
用 中 。 


以 下 是 使 用 manifest 文件 中 指定 不 同 的 Android 应 用 程序 组 件 的 标签 列表 : 





«activity» 活动 的 元 素 
<service> 服务 的 元 素 
<receiver> 广播 接收 器 的 元 素 
<provider> 内 容 提 供 者 的 元 素 


Strings 文件 


strings.xml 文 件 在 res/values 文件 夹 ， 它 包含 了 所 有 应 用 程序 所 使 用 的 文本 。 例 
如 ， 按 钮 ， 标 签 ， 默 认 的 文本 和 字符 串 类 型 相似 的 名 称 都 在 这 个 文件 。 这 个 文件 是 
负责 为 他 们 的 文字 内 容 。 例 如 ， 默 认 字符 串 文 件 看 起 来 像 以 下 文件 : 


«resources» 

«string name="app_name">HelloWorld</string> 

«string name-"hello world">Hello world!</string> 

«string name="menu_settings">Settings</string> 

«string name-"title activity main'"»MainActivityc/string» 
</resources> 


R.java 文件 


gen/com.example.helloworld/R.javaX fF si && MainActivity.java 和 Java 文 件 
strings.xml 等 资源 之 间 的 胶水 。 这 是 一 个 自动 生成 的 文件 ， 不 要 修改 R.java 文 件 的 
内 容 。R.java 文 件 下 面 是 一 个 示例 : 


/* AUTO-GENERATED FILE. DO NOT MODIFY. 


* This class was automatically generated by the 
* aapt tool from the resource data it found. It 
* should not be modified by hand. 

Sra 


package com.example.helloworld; 


public final class R ( 

public static final class attr ( 

} 

public static final class dimen { 
public static final int padding large-0x7f040002; 
public static final int padding medium-0x7f040001; 
public static final int padding small-0x7f040000; 

} 

public static final class drawable { 
public static final int ic action search-0x7f020000; 
public static final int ic launcher-z0x7f020001; 

j 

public static final class id { 
public static final int menu settings-0x7f080000; 


public static final class layout { 
public static final int activity main-0x7f030000; 
} 


public static final class menu { 
public static final int activity_main=0x7f070000; 
} 


public static final class string { 
public static final int app_name=0x7f050000; 
public static final int hello world-z0x7f050001; 
public static final int menu settings-0x7f050002; 
public static final int title activity main-0x7f050003; 


public static final class style { 
public static final int AppTheme=0x7f060000; 
j 


布局 文件 


activity_main.xml 是 在 res/layout 目录 ， 所 引用 应 用 程序 接口 布局 文件 。 要 修改 应 用 
程序 的 布局 这 个 文件 非常 频繁 地 被 修改 。“Hello World "应 用 中 ， 这 个 文件 默认 布 
E, ABE: 


<RelativeLayout xmlns:android-"http://schemas.android.com/apk/res/: 
xmlns:tools-"http://schemas.android.com/tools" 
android: layout_width="match_parent" 
android:layout height-"match parent" > 


«TextView 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: layout_centerHorizontal="true" 
android: layout_centerVertical="true" 
android: padding="@dimen/padding_medium" 
android: text="@string/hello_world" 
tools:context=".MainActivity" /> 


</RelativeLayout> 
PL RE 


这 是 一 个 简单 的 相对 布局 ， 我 们 将 在 一 个 单独 的 章节 学 习 其 它 复 条 例子 。TextView 
是 被 用 来 构建 图 形 用 户 界 面 并 由 Android 控 制 ， 它 有 各 种 各 样 的 Android 属 性 ， 如 : 
android:layout width, android:layout height 等 被 用 来 设置 其 宽度 和 高 度 等 等 ， 
@string 是 指 位 于 strings.xml 文 件 在 文件 夹 res/values 中 。 因 此 ， 
@string/hello_world 指 hello 定义 的 字符 串 在 strings.xml 文件 中 的 “Hello World!” 
字符 串 。 





运行 应 用 程序 


让 我 们 试 着 来 运行 Hello World ! 应 用 程序 。 假 设 创建 了 AVD， 同 时 做 了 环境 设 
置 。 打 开 Eclipse 去 行 应 用 程序 ， 打 开 一 个 项 目的 活动 文件 ， 并 单 击 “Run?@ 工具 栏 
上 的 图 标 。 Eclipse f£ AVD 上 安装 的 点 用 程序 后 并 启动 它 ， 如 果 一 切 都 设置 并 应 用 
没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 
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恭喜 ! 开发 的 第 一 款 Android 应 用 程序 完成 ， 现 在 只 要 把 下 面 剩余 的 教程 一 步 一 步 
学 习 ， 一 定 能 成 为 一 个 熟练 的 Android 开 发 者 。 
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Android 资源 组 织 和 访问 -Android 开 发 教程 


在 许多 Android 项 目 中 ， 有 很 多 东西 要 用 来 建立 一 个 良好 的 Android 应 用 程序 。 除 了 
编码 应 用 各 种 资源 ， 如 : 位 图 ， 颜 色 ， 布 局 定义 ， 用 户 界 面 字 符 串 ， 动 画 ， 静 态 内 
容 。 在 res/ 目 录 下 ， 这 些 资 源 一 直 保 持 在 各 自 子 目 录 。 


这 一 小 节 将 学 习 如 何 组 织 应 用 程序 资源 ， 指 定 蔡 代 资 源 ， 并 在 应 用 程序 访问 它们 。 


H ZR $1 资源 


将 每 种 类 型 的 资源 在 一 个 特定 项 目的 res/ 目 录 的 子 目 录 。 例 如 ， 这 里 有 一 个 简单 的 
项 目 文 件 层 次 : 


MyProject/ 
src/ 
MyActivity.java 
CSA 
drawable/ 
icon.png 
layout/ 
activity main.xml 
info.xml 
values/ 
strings.xml 


res/ 目 录 中 包含 不 同 的 子 目 录 的 不 同 资源 。 在 这 里 有 一 个 图 像 资 源 ， 两 个 布局 资源 
和 一 个 字符 串 资 源 文件 。 下 表 给 出 了 详细 的 项 目 在 res/ 目 录 里 面 支 持 的 资源 。 


定义 属性 的 动画 XML 文件 。 它 们 被 保存 在 res/anim/ 文 件 夹 ， 并 从 


anm R.anim X 57 iv] 
n 定义 的 颜色 状态 列表 的 XML 文件 。 它 们 被 保存 在 res/color/ ， 并 从 


R.color 类 访问 


像 被 编译 成 位 图 。.png, jpg, .gif 或 XML 文件 ， 状 态 列表 ， 图 形 ， 
drawable) ”动画 可 绘制 的 图 像 文件 。 它 们 被 保存 在 res/drawable/， 并 可 从 
R.drawable # 37 iy] 


定义 用 户 界面 布局 的 XML 文 件 。 它 们 被 保存 在 res/layout/， 并 可 从 


layout R.layout i js] 
menu/ ”定义 应 用 程序 菜单 ， 如 选项 菜单 ， 上 下 文 菜单 或 子 菜单 的 XML 文 


件 。 它 们 被 保存 在 res/menu/， 并 可 从 R.menu 类 访问 


任意 文件 保存 在 其 原始 形式 。 您 需要 
raw/ callResources.openRawResource() 与 所 述 资源 ID， 即 
R.raw.filename 来 打开 这 样 的 原始 文件 


包含 简单 的 值 ， 如 字符 串 ， 整 数 和 颜色 的 XML 文件 。 例 如 ， 这 里 
有 一 些 文件 名 约定 资源 ， 可 以 创建 在 该 目录 中 : arrays.xml 3X 
源 数 组 ， 并 可 从 R.array 类 访问 integers.xml 资源 整数 ， 并 可 
从 R.integerclass 访 问 bools.xml 资源 布尔 型 ， 并 可 从 R.bool 类 
访问 colors.xml 为 颜色 值 ， 并 可 从 R.color 类 访问 
dimens.xml 为 维度 值 ， 并 可 从 R.dimen 类 访问 

strings.xml 为 字符 串 值 ， 并 且 可 从 R.string 类 访问 
styles.xml 为 样式 并 可 从 R.style 类 访问 


«UN 可 以 通过 调用 Resources.getXML() 来 读 取 在 运行 时 任意 的 XML 文 
件 。 可 以 在 这 里 保存 各 种 配置 文件 ， 这 些 文件 可 在 运行 时 使 用 


values/ 
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应 用 程序 提供 替代 资源 以 支持 特定 的 设备 配置 。 例 如 ， 包 括 替 代 绘 制 资源 
(ie.images) ， 针 对 不 同 的 语言 不 同 的 屏幕 分 辩 率 并 替代 字符 串 资 源 。 在 运行 时 
Android 检测 当前 设备 的 配置 ， 并 为 应 用 程序 加 载 适 当 的 资源 。 


要 指定 一 组 资源 的 配置 具体 的 替代 ， 请 遵循 以 下 步 又 : 


e 创建 新 目录 在 res/ 目录 下 ， 命 名 形式 如 <resources_name>- 
<config_qualifier>。 这 里 resources_name 是 在 上 表 中 提 到 的 资源 ， 如 layout， 
drawable 等 限定 符 将 指定 一 个 单独 的 配置 ， 要 使 用 这 些 资 源 。 可 以 查看 官方 文 
档 的 完整 列表 ， 限 定 符 为 不 同类 型 的 资源 。 


。 在 这 个 新 的 目录 中 保存 相应 的 替代 资源 。 资 源 文件 必须 被 命名 为 默认 的 资源 文 
件 ， 如 下 面 的 例子 所 示 的 完全 一 样 ， 但 这 些 文件 具有 特定 内 容 的 替代 。 例 如 ， 
虽然 图 像 的 文件 名 是 相同 的 ， 但 对 高 分 辩 率 屏幕 ， 其 分 辩 率 会 很 高 。 


下 面 是 一 个 例子 ， 它 指定 一 个 默认 的 屏幕 和 高 分 辩 率 屏幕 的 奉 代 图 像 的 图 像 。 


MyProject/ 
src/ 
MyActivity.java 
*Xpes S 
drawable/ 
icon.png 
background.png 
**drawable-hdpi/** 
icon.png 
background.png 
layout/ 
activity main.xml 
info.xml 
values/ 
strings.xml 


下 面 是 另 一 个 例子 ， 指 定 一 种 默认 语言 为 阿拉 伯 语 并 指定 替代 布局 。 


MyProject/ 
src/ 
MyActivity.java 
SEO GU AC 
drawable/ 
icon.png 
background.png 
**drawable-hdpi/** 
icon.png 
background. png 
layout/ 
activity_main. xml 
info. xml 
** layout -ar/** 
main. xml 
values/ 
strings. xml 


访问 资源 

在 应 用 程序 开发 中 ， 需 要 访问 定义 的 资源 ， 无 论 是 在 代码 还 是 在 布局 XML 文 件 。 下 
面 的 部 分 介绍 了 如 何 访问 资源 在 这 两 个 场景 : 

访问 资源 代码 


当 Android 应 用 程序 被 编译 时 ， 会 产生 一 个 R 类 ， 其 中 包含 在 res/ 目录 中 的 所 有 可 用 
资源 的 资源 ID。 使 用 R 类 直接 访问 该 子 目 录 和 资源 名 称 或 资源 ID。 


示例 : 
要 访问 res/drawable/myimage.png， 并 设置 一 个 ImageView 可 使 用 下 面 的 代码 : 


ImageView imageView = (ImageView) findViewById(R.id.myimageview); 
imageView.setImageResource(R.drawable.myimage) ; 
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下 面 第 一 行 代码 ， 使 用 R.id.myimageview id 为 myimageview 定 义 布 局 文件 。 第 二 
行 代 码 使 用 R.drawable.myimage 得 到 的 图 像 名 称 myimage ， 在 /res 子 目录 下 。 


示例 : 


考虑 在 下 一 个 例子 res/values/strings.xml 有 以 下 定义 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<string name="hello">Hello, World!</string> 


</resources> 


现在 ， 可 以 设置 一 个 TextView 对 象 msg 文字 使 用 资源 ID 如 下 : 


TextView msgTextView = (TextView) findViewById(R.id.msg); 
msgTextView.setText(R.string.hello); 


示例 : 


考虑 一 个 布局 res/layout/activity_main.xml 如 以 下 的 定义 : 


<?xml version="1.0" encoding="utf-8"?> 
«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 
<TextView android: id="@+id/text" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: text="Hello, I am a TextView" /> 
«Button android: id="@+id/button" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: text="Hello, I am a Button" /> 
</LinearLayout> 
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这 个 应 用 程序 代码 的 一 个 活动 将 加 载 此 布局 ， 在 onCreate() 方 法 如 下 : 


public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main activity); 


XML 中 访问 资源 


考虑 下 面 的 XML 资源 res/values/strings.xml 文 件 ， 包 括 颜 色 资 源 和 一 个 字符 串 资 
源 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
«color name="opaque_red">#f00</color> 
«string name="hello">Hello!</string> 
</resources> 


现在 ， 可 以 利用 这 些 资源 ， 在 下 面 的 布局 文件 中 设置 文本 颜色 和 文本 字符 串 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 
«EditText xmlns:android="http://schemas.android.com/apk/res/androic 
android: layout_width="fill_ parent" 
android: layout_height="fill_parent" 
android: textColor=**"@color/opaque_red"** 
android: text=**"@string/hello" />** 
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现在 ， 如 果 将 再 次 通过 前 面 的 章节 了 解 ， 例 如 : Hello World ! 应 用 ， 将 有 助 于 更 好 
的 理解 本 小 节 介 绍 的 概念 。 了 解 在 前 面 的 小 节 中 是 如 何 利用 各 种 资源 的 基本 操作 。 





Android Activity - Android 开 发 教程 


活动 (activity) 表 示 一 个 单一 屏幕 上 的 用 户 界 面 。 例 如 ， 电 子 邮 件 应 用 程序 可 能 是 一 
个 活动 ， 显 示 新 的 电子 邮件 列表 是 另 一 个 活动 ， 撰 写 电 子 邮 件 ， 阅 读 电子 邮件 可 能 
又 是 其 它 的 活动 。 如 果 应 用 程序 有 一 个 以 上 的 活动 ， 那 么 应 该 将 其 中 的 一 个 活动 标 

记 为 活动 启动 应 用 程序 。 


如 果 便 使 用 C，C++ 或 Java 编 程 语 言 ， 那 么 可 以 知道 一 般 程 序 是 从 main() KAA 
始 。 相 似 地 ，Android 系 统 是 一 个 Activity 的 onCreate() 方法 调用 开始 和 启动 程序 。 一 
个 回调 方法 - 启动 一 个 活动 ， 以 及 其 它 回 调 方法 ， 如 销毁 一 个 活动 ， 活 动 的 生命 周 
期 如 下 图 所 示 序 列 : 






onResume() 


onStop() 











£777 — 91 onRestart( 
onCreate() onDestroy() 
| Y 
| r j 
/oh gom 


Activity 类 定义 了 以 下 的 回调 方法 ， 即 事件 。 并 不 需要 实现 所 有 的 回调 方法 。 然 而 重 
要 的 是 了 解 每 一 个 变化 以 及 实现 ， 以 确保 应 用 程序 如 用 户 所 期 望 的 行为 或 方式 。 


回调 方法 描述 
onCreate() 这 是 第 一 次 回调 ， 活 动 在 第 一 次 创建 时 调用 。 
onStart() 这 个 回调 被 称 为 活动 时 变 成 对 用 户 可 见 。 


onResume() ， 这 就 是 所 谓 的 启动 ， 当 用 户 与 应 用 程序 交互 。 


onPause() 暂停 活动 不 接收 用 户 输 入 并 不 执行 任何 代码 并 调用 时 ， 当 前 的 
活动 被 暂停 ， 恢 复 以 前 的 活动 。 


onStop() 这 个 回调 被 称 为 活动 时 不 再 可 见 
onDestroy() ， 活动 前 由 系统 被 销毁 ， 调 用 此 回调 
onRestart() ”活动 重新 启动 时 ， 停 止 后 调用 此 回调 


例子 


这 个 例子 通过 简单 的 步 又， 显示 Android 应 用 程序 活动 的 生命 周期 。 按 照 下 面 的 


又 来 修改 Android 应 用 程序 ， 在 创建 的 Hello World 范例 章节 : 


步 
TR 


2 
3 


以 下 是 修改 主要 活动 文件 src/com.example.helloworld/MainActivity.java 后 
该 文件 包含 了 每 个 基本 生命 周期 方法 。 Log.d() 方法 是 用 来 生成 日 志 消 息 : 


描述 


我 们 将 使 用 Eclipse IDE 中 创建 一 个 Android 应 用 程序 ， 并 将 其 命名 在 


HelloWorld 的 包 下 ， 如 : com.example.helloworld 的 Hello World 范 例 章节 


解释 。 
修改 Main 活 动 文件 MainActivityjava, 其 余 文 件 保持 不 变 。 


运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 中 所 做 的 更 改 结果 。 


package com.example.helloworld; 


import android.os.Bundle; 
import android.app.Activity; 
import android.util.Log; 


public class MainActivity extends Activity { 


String msg - "Android : 


n, 
, 


/** Called when the activity is first created. */ 
QOverride 
public void onCreate(Bundle savedInstanceState) { 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 
Log.d(msg, "The onCreate() event"); 


/** Called when the activity is about to become visible. 
QOverride 
protected void onStart() { 


super.onStart(); 
Log.d(msg, "The onStart() event"); 


/** Called when the activity has become visible. */ 
QOverride 
protected void onResume() { 


super.onResume(); 
Log.d(msg, "The onResume() event"); 


/** Called when another activity is taking focus. */ 
QOverride 
protected void onPause() ( 


super.onPause(); 


S 


的 内 容 ， 


Log.d(msg, "The onPause() event"); 


/** Called when the activity is no longer visible. */ 
QOverride 
protected void onStop() ( 

super.onStop(); 

Log.d(msg, "The onStop() event"); 


/** Called just before the activity is destroyed. */ 
QOverride 
public void onDestroy() ( 

super.onDestroy(); 

Log.d(msg, "The onDestroy() event"); 


活动 类 加 载 UI 组 件 ， 使 用 在 项 目的 res/layout 文件 夹 的 XML 文件 。 下 面 的 语句 从 
res/layout/activity main.xml 文件 加 载 UI 组 件 : 


setContentView(R.layout.activity main); 


应 用 程序 可 以 有 一 个 或 多 个 活动 受 任何 限制 。 每 个 活动 定义 为 应 用 程序 必须 在 
AndroidManifest.xml 文 件 中 声明 ， 必 须 声 明 应 用 程序 的 主要 活动 列表 <intent- 
filter>， 包 括 如 下 MAIN 操作 和 LAUNCHER X : 


«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com.example.helloworld" 
android:versionCode="1" 
android:versionName="1.0" > 
<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="15" /> 
<application 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android:name="".MainActivity" 
android:label-"Qstring/title activity main" > 
<intent-filter> 
«action android:name="android.intent.action.MAIN" /: 
«category android:name-"android.intent.category.LAU! 
</intent-filter> 
</activity> 
</application> 
</manifest> 








al 





如 果 MAIN 动作 或 LAUNCHER 类 不 声明 一 个 活动 ， 那 么 应 用 程序 图 标 将 不 会 出 现 
在 应 用 程序 列表 的 主屏 幕 上 。 


现在 党 斌 运行 修改 后 的 Hello World! 应 用 程序 。 假 设 已 经 创建 了 AVD， 同 时 做 环 
境 设置 。 从 Eclipse 运 行 应 用 程序 ， 打 开 一 个 项 目的 活动 文件 ， 并 单 击 “Run”"O 图 
ro Eclipse 在 AVD 上 安装 应 用 程序 ， 并 雇 动 它 ， 如 果 设 置 和 应 用 都 没有 问题 ， 它 
会 显示 仿真 器 窗口 中 ， 也 应 该 看 到 以 下 日 志 消 息 在 Eclipse IDE LogCat 窗口 : 


07-19 15:00:43.405: D/Android :(866): The onCreate() event 
07-19 15:00:43.405: D/Android :(866): The onStart() event 
07-19 15:00:43.415: D/Android :(866): The onResume() event 
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Atata - 在 Android 模 拟 器 上 的 红色 按钮 ， 它 会 在 Eclipse IDE 窗 口 LogCat 
中 生成 以 下 事件 消息 : 


07-19 15:01:10.995: D/Android :(866): The onPause() event 
07-19 15:01:12.705: D/Android :(866): The onStop() event 


让 我 们 再 次 党 试 单 击 菜单 按钮 肢 - Android 菜 单 按钮 在 Android 模 拟 器 中 ， 它 会 在 
Eclipse IDE 的 LogCat 窗 口中 生成 以 下 事件 消息 : 


07-19 15:01:13.995: D/Android :(866): The onStart() event 
07-19 15:01:14.705: D/Android :(866): The onResume() event 


接 下 来 ， 就 让 我 们 再 次 尝试 点 击 后 退 按钮 塘 - Android 后 退 按钮 在 Android 模 拟 器 ， 
它 会 生成 以 下 事件 消息 在 Eclipse IDE LogCat 窗 口中 ， 以 上 完成 Android 应 用 程序 
Acitivity 的 生命 周期 。 


07-19 15:33:15.687: D/Android :(992): The onPause() event 
07-19 15:33:15.525: D/Android :(992): The onStop() event 
07-19 15:33:15.525: D/Android :(992): The onDestroy() event 
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Android Service - Android 开 发 教程 


Service( 服 务 ) 是 一 种 在 后 台 运 行 ， 执 行 长 时 间 运 行 的 操作 ， 无 需 与 用 户 交 互 的 组 


件 。 例 如 ， 一 个 服务 可 以 在 后 台 播放 音乐 ， 用 户 在 不 同 的 应 用 程序 或 者 可 能 通过 网 


络 获取 数据 ， 而 不 阻塞 用 户 交 互 活动 。 本 质 上 ， 一 个 服务 可 以 采取 两 种 状态 : 


状态 描述 


当 一 个 应 用 程序 组 件 ， 如 活动 ， 开 始 通 过 调用 StartService() 启 动 一 
Started ”个 服务 。 开 始 以 后 服务 可 以 无 限期 地 在 后 台 运 行 ， 即 使 启动 它 的 组 


件 被 破坏 。 


当 一 个 应 用 程序 组 件 绑 定 调用 bindService() 方 法 绑 定 服务 。 绑 定 服务 


Bound ”提供 客户 端 -服务 器 的 接口 ， 人 允许 组 件 进行 交互 的 服务 ， 发 送 请 求 ， 
得 到 结果 ， 这 样 可 以 跨 进 程 进 程 间 通信 (IPC) 。 


每 个 服务 都 具有 生命 周期 回调 方法 ， 可 以 实现 监视 服务 的 状态 变化 ， 并 在 适当 的 阶 
段 执 行 工 作 。 下 图 左 侧 显 示 的 整个 生命 周期 由 StartService() 创 建 提供 服务 ， 右 边 的 


图 显示 bindService() 创 建 的 整个 生命 周期 提供 服务 : 


N 


' — Calto - 





onCreate() onCreate() 





onDestroy() 
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要 创建 一 个 服务 ， 需 要 创建 一 个 Java 类 ， 扩 展 Service 基 类 或 者 它 的 子 类 。Service 
类 定义 各 种 回调 方法 ， 如 下 面 表 格 给 出 。 但 是 也 并 不 需要 实现 所 有 的 回调 方法 。 
重要 的 是 要 了 解 每 一 个 变化 以 及 实现 ， 以 确保 应 用 程序 能 如 用 户 所 期 望 的 行为 方式 

运行 。 


回调 描述 


系统 调用 此 方法 当 另 一 组 件 ， 如 一 个 活动 ， 通 过 调用 
startService() 要 求 该 服务 启动。 如 果 要 实现 方法 ， 它 工 
作 完 成 后 停止 服务 ， 通 过 调用 stopSelf() 或 stopService() 
方法 。 


该 系统 调用 这 个 方法 当 其 他 组 件 要 通过 调用 
bindService() 绑 定 服务 。 如 果实 现 此 方法 ， 必 须 提 供 客 

onBind() 户 端 与 服务 进行 通信 ， 通 过 返回 一 个 IBinder 对 象 的 接 
口 。 必 须 实现 此 方法 ， 但 如 果 不 希 望 被 绑 定 ， 那 么 应 该 
返回 null。 


系统 调用 此 方法 ， 当 所 有 客户 都 从 服务 发 布 的 特定 接口 
断 开 。 


该 系统 调用 这 个 方法 时 ， 新 的 客户 端 已 连接 到 服务 ， 它 
事先 未 通知 ， 所 有 已 经 上 解除 绑 定 后 (意向 ) MFE. 


onCreate() 该 系统 调用 时 ， 使 用 onStartCcommand() 或 onBind() 首 先 
创建 的 服务 这 个 方法 。 此 调用 需要 执行 一 次 性 安装 。 


系统 调用 这 个 方法 当 服务 不 再 使 用 〈 被 销毁 ) 。 服 务 应 
onDestroy() 该 实现 这 个 用 于 清理 ， 如 线程 ， 注 册 的 侦 听 器 ， 接 收 器 
等 任何 资源 


onStartCommand() 


onUnbind() 


onRebind() 


下 面 的 主 服务 演示 每 一 个 方法 生命 周期 : 


package com.yiibai; 


import android.app.Service; 
import android.os.IBinder; 
import android.content.Intent; 
import android.os.Bundle; 


public class HelloService extends Service { 


/** indicates how to behave if the service is killed */ 
int mStartMode; 

/** interface for clients that bind */ 

IBinder mBinder; 

/** indicates whether onRebind should be used */ 
boolean mAllowRebind; 


/** Called when the service is being created. */ 
QOverride 


public void onCreate() { 


} 


/** The service is starting, due to a call to startService() */ 

@Override 

public int onStartCommand(Intent intent, int flags, int startId: 
return mStartMode; 

} 


/** A client is binding to the service with bindService() */ 
QOverride 
public IBinder onBind(Intent intent) { 
return mBinder; 
} 


/** Called when all clients have unbound with unbindService() *, 
@Override 
public boolean onUnbind(Intent intent) { 

return mAllowRebind; 


} 

/** Called when a client is binding to the service with bindSer\ 
QOverride 

public void onRebind(Intent intent) { 

j 


/** Called when The service is no longer used and is being desti 
QOverride 
public void onDestroy() ( 





示例 


这 个 例子 将 通过 简单 的 步骤 显示 了 如 何 创建 Android 服 务 。 按 照 下 面 的 步骤 来 修改 
前 面 章节 创建 的 Android 应 用 程序 - Hello World 示 例 : 


6 


7 
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使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 其 命名 为 HelloWorld 在 包 
com.example.helloworld 下 ， 类 似 Hello World 示 例 章节 中 一 样 。 


修改 主要 活动 文件 MainActivity.java 添 加 startService() 和 stopService() 方 
X. 


在 包 com.example.helloworld 下 创建 一 个 新 的 Java 文 件 MyService.java。 
该 文件 特有 实现 Android 服 务 相 关 的 方法 。 


使 用 <service.../> 标 签 定义 AndroidManifest.xml 文 件 服务 。 一 个 应 用 可 以 
有 一 个 或 多 个 服务 ， 没 有 任何 限制 。 


修改 res/layout/activity_main.xml 文 件 的 默认 内 容 包 括 线性 布局 中 的 两 个 按 
£o 


定义 两 个 常量 start _service 和 stop_service 在 res/values/strings.xml 文件 


中 
运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 改 性 主要 活动 文件 srcicom.example.helloworld/MainActivity.java 的 内 
容 。 这 个 文件 包括 每 个 基本 的 生命 周期 方法 。 添 加 StartService() 和 
stopService() 方法 来 启动 和 停止 服务 。 


package com.example.helloworld; 


import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.content.Intent; 
import android.view.View; 


public class MainActivity extends Activity { 


@Override 

public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 

} 

QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.activity main, menu); 
return true; 


j 


// Method to start the service 
public void startService(View view) { 

startService(new Intent(getBaseContext(), MyService.class)); 
} 


// Method to stop the service 
public void stopService(View view) { 

stopService(new Intent(getBaseContext(), MyService.class)); 
} 


Eee 


EA Fsrc/com.example.helloworld/MyService.java 的 内 容 。 这 个 文件 可 以 有 一 
个 或 多 个 方法 来 使 用 服务 。 现 在 要 实现 只 有 两 个 方法 onStartCommand() 和 
onDestroy() : 


package com.example.helloworld; 


import android.app.Service; 
import android.content.Intent; 
import android.os.IBinder; 
import android.widget.Toast; 


public class MyService extends Service ( 
QOverride 
public IBinder onBind(Intent arg0O) { 
return null; 
} 


QOverride 

public int onStartCommand(Intent intent, int flags, int startId: 
// Let it continue running until it is stopped. 
Toast.makeText(this, "Service Started", Toast.LENGTH LONG).sI 
return START STICKY; 

} 

QOverride 

public void onDestroy() ( 
super.onDestroy(); 
Toast.makeText(this, "Service Destroyed", Toast.LENGTH LONG) 





irf AndroidManifest.xml 文件 的 内 容 修改 。 在 这 里 添加 «service...» 标签 ， 
包括 服务 : 


«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package-"com.example.helloworld" 
android: versionCode="1" 
android: versionName="1.0" > 
<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="15" /> 
<application 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android:name="".MainActivity" 
android:label-"Qstring/title activity main" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" /: 
«category android: name="android.intent.category.LAUl 
</intent-filter> 
</activity> 
<service android:name=".MyService" /> 
</application> 
</manifest> 


J 
将 以 下 是 res/layout/activity main.xml 文件 的 内 容 ， 包 括 两 个 按钮 : 





«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/ant 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation-"vertical" » 


«Button android:id="@+id/btnStartService" 
android:layout widthz"fill parent" 
android:layout height-"wrap content" 
android: text="@string/start_service" 
android: onClick="startService"/> 


«Button android: id="@+id/btnStopService" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/stop_service" 
android:onClick="stopService" /> 


</LinearLayout> 
ae 


下 面 将 在 res/values/strings.xml 中 定义 两 个 新 的 常量 : 





«resources» 


«string name="app_name">HelloWorld</string> 

«string name-"hello world">Hello world!</string> 

«string name="menu_settings">Settings</string> 

«string name-"title activity main'"»MainActivityc/string» 
«string name="Start_service">Start Service</string> 
«string name="Stop_service">Stop Service</string> 


</resources> 


现在 运行 修改 后 的 Hello World ! 应 用 程序 。 假 设 创建 了 AVD 并 同时 做 了 环境 设 
置 。 要 在 Eclipse 运 行 的 应用 程序 ， 打 开 一 个 项 目的 活动 文件 ， 从 工具 栏 上 找到 并 单 
击 “run” OB +. Eclipse AVD 上 安装 的 应 用 程序 ， 并 启动 它 ， 如 果 一 切 设置 以 及 应 
用 都 没有 问题 ， 那 么 将 会 显示 以 下 模拟 器 窗口 : 


[e MainActivity 


Start Service 


Stop Service 
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要 开始 服务 ， 现 在 就 点 击 启 动 服务 按钮 ，onStartCommand() 方法 在 程序 中 ， 每 一 
个 服务 开始 后 将 出 现 消息 在 模拟 器 底部 ， 如 下 : 
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(3 MainActivity 
Start Service 


Stop Service 
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要 停止 该 服务 ， 可 以 点 击 停止 服务 (Stop Service) 按钮 。 
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Android 广 播 接 收 器 - Android 开 发 教程 


广播 接收 器 (Broadcast) 简 单 地 从 其 他 应 用 程序 或 系统 响应 广播 消息 。 这 些 消息 有 时 
称 为 事件 或 意图 。 例 如 ， 应 用 程序 也 可 以 发 起 广播 ， 以 让 其 他 应 用 程序 知道 某 些 数 
据 已 经 被 下 载 到 设备 上 ， 可 供 它 们 使 用 。 广 播 接收 器 会 拦截 此 通信 ， 并 会 采取 适当 
操作 (mE). 

以 下 两 个 重要 的 步骤 ， 在 使 用 广播 接收 器 工作 系统 及 广播 意图 : 

e 创建 广播 接收 器 

e 注册 广播 接收 器 


还 有 一 个 附加 的 步骤 ， 要 实现 自 定义 的 意图 ， 那 么 将 必须 创建 并 广播 意图 。 


创建 广播 接收 器 


实现 广播 接收 机 BroadcastReceiver 类 的 一 个 子 类 并 重 写 onReceive() 方 法 ， 其 中 每 
个 收 到 消息 作为 一 个 Intent 对 象 参 数 。 


public class MyReceiver extends BroadcastReceiver { 


QOverride 
public void onReceive(Context context, Intent intent) { 
Toast.makeText(context, "Intent Detected.", Toast.LENGTH LON( 





注册 广播 接收 器 


应 用 程序 侦 听 特定 的 广播 意图 是 通过 在 AndroidManifest.xml 文件 中 注册 一 个 广播 
接收 器 。 寄 存 器 MyReceiver 系统 生成 事件 ACTION_BOOT_COMPLETED， 在 
Android 系 统 完成 了 和 启动 过 程 后 ， 这 是 由 系统 启动 执行 的 。 


«application 


android:icon-"Qdrawable/ic launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 


«receiver android:name="MyReceiver'"> 


<intent-filter> 


«action android:name="android.intent.action.BOOT_COMPLETEI 


</action> 
</intent-filter> 
</receiver> 


</application> 


E mm iN 





当 Android 设备 启动 ， 它 会 被 截获 BroadcastReceiver 的 MyReceiverand AX 


Hie 48, FS onReceive() 将 被 执行 。 


有 几 个 系统 产生 的 事件 定义 在 最 后 意图 类 的 静态 字段 。 下 表 列 出 了 一 些 重要 的 系统 


事件 。 
事件 常量 


android.intent.action.BATTERY CHANGED 
android.intent.action.BATTERY LOW 


android.intent.action. BATTERY OKAY 


android.intent.action.BOOT COMPLETED 


android.intent.action.BUG REPORT 


android.intent.action.CALL 


android.intent.action. CALL BUTTON 


android.intent.action.DATE CHANGED 


android.intent.action. REBOOT 


广播 定制 意图 


描述 
持久 广播 含 充电 状态 。 级 别 ， 
以 及 其 他 相关 的 电池 信息 。 
显示 设备 的 电池 电量 低 。 
指示 电池 正在 低 点 后 但 没有 问 


Filo 


一 次 播 出 后 ， 系 统 已 完成 启 
动 


显示 活动 报告 的 错误 。 

执行 呼叫 由 数据 指定 某 人 。 

用 户 按 下 “呼叫 "按钮 进入 拨号 器 
vidi ELE 
日 期 改变 。 

有 设 各 重启 。 


如 果 希 望 应 用 程序 本 身 生 成 并 发 送 自 定 义 意图 ， 那 么 必须 使 用 sendBroadcast() 方 法 
里 面 活 动 类 来 创建 和 发 送 这 些 的 意图 。 使 用 (意向 ) sendStickyBroadcast() 方法 意 
图 是 粘 粘 的 ， 这 意味 着 所 发 送 的 意图 保持 周 广 转播 出 后 完成 。 


public void broadcastIntent(View view) 


{ 
Intent intent = new Intent(); 
intent.setAction("com.yiibai.CUSTOM INTENT"); 
sendBroadcast(intent); 

} 


意图 com.yiibai.CUSTOM_INTENT 也 可 以 以 注册 类 似 的 方式 ， 因 为 我 们 产生 注册 
系统 的 意图 。 


«application 
android:icon-z"Qdrawable/ic launcher" 
android:label-"Qstring/app name" 
android: theme="@style/AppTheme" > 


«receiver android:name="MyReceiver'"> 
<intent-filter> 
«action android: name="com.yiibai.CUSTOM_INTENT"> 
</action> 
</intent-filter> 
</receiver> 


</application> 


示例 


这 个 例子 将 解释 如 何 创 建 BroadcastReceiver 拦截 自 定 义 意图 。 熟 悉 自 定义 意图 
后 ， 就 可 以 编写 应 用 程序 来 拦截 系统 生成 的 意图 。 现 在 按照 下 面 的 步骤 来 修改 前 面 
创建 的 Hello World 范 例 中 Android 应 用 程序 : 
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使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 其 命名 为 HelloWorld 在 包 
com.example.helloworld 下 ， 类 似 Hello World 示 例 章节 中 一 样 。 


2 修改 主要 活动 文件 MainActivity.java 添 加 broadcastintent() 方 法 。 


在 包 com.example.helloworld 下 创建 一 个 新 的 Java 文 件 
MyReceiverjava， 并 定义 一 个 BroadcastReceiver。 


应 用 程序 可 以 处 理 一 个 或 多 个 自 定义 和 系统 的 意图 不 受 任何 限制 。 要 拦截 
4 每 一 个 意图 ， 必 须 使 用 <receiver.../> 标 签 并 注册 在 AndroidManifest.xml 文 


件 中 。 
修改 res/layout/activity main.xml 文件 的 默认 内 容 包 括 : 一 个 按钮 广播 意 
图 。 


6 ”定义 常量 broadcast inte 在 ntres/values/strings.xml 文 件 中 
7 ， 运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 
以 下 是 修改 主要 活动 文件 src/com.example.helloworld/MainActivity.java 后 的 内 


容 。 这 个 文件 包括 每 个 生命 周期 方法 。 这 里 添加 了 broadcastintent() 方法 来 广播 
自 定义 的 意图 。 


package com.example.helloworld; 


import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.content.Intent; 
import android.view.View; 


public class MainActivity extends Activity { 


@Override 

public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 

} 

@Override 

public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.activity main, menu); 
return true; 

} 

// broadcast a custom intent. 

public void broadcastIntent(View view) 


{ 
Intent intent = new Intent(); 
intent.setAction("com.yiibai.CUSTOM INTENT"); 
sendBroadcast(intent); 

j 


下 面 是 src/com.example.helloworld/MyReceiver.java 的 内 容 : 


package com.example.helloworld; 


import android.content.BroadcastReceiver; 
import android.content.Context; 

import android.content.Intent; 

import android.widget.Toast; 


public class MyReceiver extends BroadcastReceiver { 


QOverride 
public void onReceive(Context context, Intent intent) { 
Toast.makeText(context, "Intent Detected.", Toast.LENGTH LON( 


j 








"Fm AndroidManifest.xml 文件 的 内 容 修改 。 在 这 里 添加 <service.../> 标 签 ， 包 括 
服务 : 


«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package-"com.example.helloworld" 
android: versionCode="1" 
android: versionName="1.0" > 
<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="15" /> 
<application 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android:name="".MainActivity" 
android:label-"Qstring/title activity main" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" /: 
«category android: name="android.intent.category.LAUl 
</intent-filter> 
</activity> 
«receiver android:name="MyReceiver'"> 
<intent-filter> 
«action android: name="com.yiibai.CUSTOM_INTENT"> 
</action> 
</intent-filter> 
</receiver> 
</application> 
</manifest> 
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以 下 将 res/layout/activity_main.xml 文件 的 内 容 包 括 一 个 按钮 来 广播 自 定 义 意 
图 : 





«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/ant 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 


«Button android: id="@+id/btnStartService" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/broadcast_intent" 
android: onClick="broadcastIntent"/> 


</LinearLayout> 
aS 


下 面 将 在 res/values/strings.xml 中 定义 两 个 新 的 常量 的 内 容 : 





«resources» 


«string name="app_name">HelloWorld</string> 

«string name-"hello world">Hello world!</string> 

«string name="menu_settings">Settings</string> 

«string name-"title activity main'"»MainActivityc/string» 
«string name="broadcast_intent">Broadcast Intent</string> 


</resources> 


现在 运行 修改 后 的 Hello World ! 应用 程序 。 假 设 创 建 了 AVD 并 设置 了 环境 。 要 从 
Eclipse 运行 的 应 用 程序 ， 首 先 打 开 一 个 项 目的 活动 文件 ， 从 工具 栏 单 击 "run" O 图 
标 。 Eclipse AVD 安 装 的 应 用 程序 ， 并 启动 它 ， 如 果 设 置 和 应 用 都 没有 问题 ， 将 会 
显示 以 下 模拟 器 窗口 : 


Broadcast Intent 
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现在 广播 自 定义 的 意图 ， 点 击 上 广播 意图 按钮 ， 这 将 广播 自 定义 在 
“com.yiibai.CUSTOM_INTENT” 注册 BroadcastReceiver 的 意图 将 被 MyReceiver 
拦截 。 实现 的 逻辑 如 下 出 现 底 部 的 模拟 器 : 
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Broadcast Intent 
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可 以 尝试 执行 其 他 BroadcastReceiver 拦截 系统 的 意图 ， 如 系统 启动 ， 更 改 日 期 ， 
电池 电量 不 足 等 。 





Android] TAXAT - AnGroidzT X «XT 


Android 内 容 提 供 者 - Android 开 发 教程 


内 容 提供 程序 (Provider) 组 件 从 一 个 应 用 到 其 他 请 求 提 供 数 据 。 通 过 
ContentResolver 类 的 方法 这 样 的 请 求 处 理 。 内 容 提供 程序 使 用 不 同 的 方式 来 存储 
数据 ， 并 且 可 以 将 数据 存储 在 数据 库 中 ， 文 件 中 ， 甚 至 在 网 络 上 。 


每 一 个 Android 应 用 程序 运行 在 自己 的 进程 保持 一 个 应 用 程序 数据 ， 在 另外 一 个 应 
用 程序 中 隐藏 自己 的 权限 。 但 有 时 需要 在 应 用 程序 之 间 共 享 数据 。 这 时 内 容 提供 程 
序 是 非常 有 用 。 


内 容 提供 程序 将 内 容 集中 在 一 个 地 方 ， 让 许多 不 同 的 应 用 访问 。 内 容 提供 程序 的 行 
非常 像 数据 亩 ， 可 以 对 它 进行 查询 ， 编 辑 等 操作 ， 添 加 或 删除 可 使 用 insert(), 


update(), delete(), query() 方法 。 在 大 多 数 情 况 下 ， 这 些 数 据 都 存储 在 SQlite 数 据 
库 。 


内 容 提 供 程序 实施 ContentProvider 类 的 子 类 ， 必 须 实现 了 一 套 标 准 的 API， 使 其 
他 应 用 程序 来 执行 事务 。 


public class MyContentProvider extends  ContentProvider { 


j 


内 容 的 URI 
要 查询 内 容 提供 程序 ， 可 以 指定 URI 形式 如 以 下 格式 的 查询 字符 串 : 


<prefix>://<authority>/<data_type>/<id> 


这 里 是 URI 的 各 个 部 分 的 细节 


部 分 描 
prefix 始终 设置 内 容 为 :// 


规定 内 容 提供 商 的 名 称 ， 例 如 联系 人 人， 浏览 器 等 。 对 于 第 三 方 内 
authority  ， 容 提 供 商 ， 这 可 能 是 完全 合格 的 名 称 ， 如 

com. yiibai.statusprovider 

表示 数据 ， 特 定 提供 程序 提供 的 类 型 。 例 如 ， 如 果 得 到 所 有 的 联 
data type ， 系 人 的 通讯 录 内 容 提供 程序 ， 那 么 数据 路 径 URI 是 这 样 的 

content://contacts/people 


id 规定 要 求 的 特定 记录 。 例 如 ， 如 果 正 在 寻找 联系 人 编号 为 5， 在 联 
系 人 内 容 提 供 者 中 ， 则 URI 是 这 样 的 content;//contacts/people/5. 


学 


创建 内 容 提供 者 


以 下 是 简单 的 步 又 用 来 创建 自己 的 内 容 提供 者 的 数量 。 
e 首先 ， 需 要 创建 一 个 内 容 提供 者 扩展 ContentProvider 基 类 。 
e 其 次 ， 需 要 定义 内 容 提供 者 用 于 访问 内 容 的 URI 地 址 。 


。 接 下 来 ， 需 要 创建 自己 的 数据 库 用 于 保存 内 容 。 通 常情 况 下 ，Android 使 用 
SQLite 数 据 库 ， 并 且 框 架 需 要 重 写 onCreate() 方法 会 使 用 SQLite 开 放 的 
Helper 方 法 来 创建 或 打开 提供 者 数据 库 。 当 局 动 应 用 程序 时 ， 每 个 内 容 提 供 者 
的 onCreate() 方 法 调用 义理 程序 在 主 应 用 程序 。 


e 接 下 来 ， 必 须 实 现 内 容 提供 者 查询 来 执行 不 同 的 数据 库 的 具体 操作 。 
e 最 后 ， 在 activity 文 件 使 用 <provider> 标 签注 册 内 容 提供 者 。 
下 面 是 需要 覆盖 内 容 提 供 程序 类 的 方法 的 列表 : 
e onCreate() 方法 被 称 为 提供 者 开始 。 
e query() 方法 接收 来 自 客 户 端的 请 求 。 返 回 的 结果 作为 一 个 Cursor 对 象 。 
e insert() 方法 插入 一 条 新 记录 到 内 容 提供 者 。 
e delete() 方法 从 内 容 提 供 者 删除 记录 。 
e update() 方法 从 内 容 提 供 者 更 新 现 有 记录 。 
e getType() 此 方法 在 给 定 的 URI 返 回 MIME 类 型 的 数据 。 


示例 


这 个 例子 将 解释 如 何 创 建 自 己 的 ContentProvider。 因 此 按照 下 面 的 步骤 类 似 于 我 
们 之 前 创建 Hello World 范 例 : 


Step 描述 
使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 它 命名 为 


1 MyContentProviderunder 在 包 com.example.mycontentprovider 下 并 使 
用 空 的 Activity。 

2 修改 主要 活动 文件 MainActivityjava 增 加 两 个 新 的 方法 
onClickAddName() 和 onClickRetrieveStudents(). 
创建 一 个 新 的 名 为 StudentsProviderjava 的 java 文 件 在 

3 packagecom.example.mycontentprovider 包 下 ， 并 定义 实际 提供 者 和 
相关 方法 。 

4 使 用 注册 内 容 提供 者 在 AndroidManifest.xml 文 件 中 的 <provider.../> 标 签 

5 修改 res/layout/activity_main.xml 文 件 的 默认 内 容 包 括 一 个 小 的 GUI 添 加 
BA HL. 
"EUER X. 

6 在 res/values/strings.xml 文 件 中 定义 所 需 的 常量 

7 运行 该 应 用 程序 启动 Android 模 拟 器 和 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 主 活动 文件 src/com.example.mycontentprovider/MainActivity.java 修改 
后 的 内 容 。 这 个 文件 可 以 包括 每 个 生命 周期 方法 。 我 们 已 经 增加 了 两 个 新 方法 
onClickAddName() 和 onClickRetrieveStudents() 来 处 理 用 户 与 应 用 程序 交互 。 


package com.example.mycontentprovider; 


import android.net.Uri; 

import android.os.Bundle; 

import android.app.Activity; 

import android.content.ContentValues; 
import android.content.CursorLoader; 
import android.database.Cursor; 
import android.view.Menu; 

import android.view.View; 

import android.widget.EditText; 
import android.widget.Toast; 


public class MainActivity extends Activity { 


QOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


j 


QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 


j 


public void onClickAddName(View view) ( 


j 


// Add a new student record 
ContentValues values - new ContentValues(); 


values.put(StudentsProvider.NAME, 
((EditText)findViewById(R.id.txtName)).getText().toString()), 


values.put(StudentsProvider.GRADE, 
((EditText)findViewById(R.id.txtGrade)).getText().toString(). 


Uri uri - getContentResolver().insert( 
StudentsProvider.CONTENT URI, values); 


Toast.makeText(getBaseContext(), 
uri.toString(), Toast.LENGTH LONG).show( ); 


public void onClickRetrieveStudents(View view) ( 


// Retrieve student records 
String URL - "content://com.example.provider.College/student: 
Uri students - Uri.parse(URL); 
Cursor c - managedQuery(students, null, null, null, "name"); 
if (c.moveToFirst()) { 
dot 
Toast.makeText(this, 
c.getString(c.getColumnIndex(StudentsProvider. ID)) + 
"|, "+ C.getString(c.getColumnIndex( StudentsProvider 
", " + Cc.getString(c.getColumnIndex( StudentsProvider. ( 
Toast .LENGTH_SHORT).show(); 
} while (c.moveToNext()); 





在 com.example.mycontentprovider 包 下 创建 新 的 StudentsProvider.java 文件 ， 以 


下 是 内 容 


package com.example.mycontentprovider; 


import 


import 
import 
import 
import 
import 
import 
import 
import 


java.util.HashMap; 


android.content.ContentProvider; 
android.content.ContentUris; 
android.content.ContentValues; 
android.content.Context; 
android.content.UriMatcher; 
android.database.Cursor; 
android.database.SQLException; 
android.database.sqlite.SQLiteDatabase; 


Import 
Import 
Import 
Import 


public 


android.database.sqlite.SQLiteOpenHelper; 
android.database.sqlite.SQLiteQueryBuilder; 
android.net.Uri; 

android.text.TextUtils; 


class StudentsProvider extends ContentProvider { 


static final String PROVIDER NAME = "com.example.provider.Colle( 
static final String URL = "content://" + PROVIDER NAME + "/stude 
static final Uri CONTENT URI - Uri.parse(URL); 


static final String ID - " id"; 
static final String NAME - "name"; 
static final String GRADE - "grade"; 


private static HashMap<String, String» STUDENTS PROJECTION MAP; 


static final int STUDENTS - 1; 
static final int STUDENT ID - 


2; 


static final UriMatcher uriMatcher; 
static{ 


j 
EXER 


uriMatcher - new UriMatcher(UriMatcher.NO MATCH); 
uriMatcher.addURI(PROVIDER NAME, "students", STUDENTS); 
uriMatcher.addURI(PROVIDER NAME, "students/£Z", STUDENT ID); 


* Database specific constant declarations 


xA 


private SQLiteDatabase db; 

static final String DATABASE NAME - "College"; 

static final String STUDENTS TABLE NAME - "students"; 
static final int DATABASE VERSION - 1; 

static final String CREATE DB TABLE - 


EXER 


CREATE TABLE " + STUDENTS TABLE NAME + 
(Lid INTEGER PRIMARY KEY AUTOINCREMENT, " + 
name TEXT NOT NULL, " + 
grade TEXT NOT NULL);"; 


* Helper class that actually creates and manages 
* the provider's underlying data repository. 
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private static class DatabaseHelper extends SQLiteOpenHelper { 


DatabaseHelper(Context context)([ 
super(context, DATABASE NAME, null, DATABASE VERSION); 
} 


@Override 
public void onCreate(SQLiteDatabase db) 


{ 
db.execSQL(CREATE DB TABLE); 


} 


QOverride 
public void onUpgrade(SQLiteDatabase db, int oldVersion, 
int newVersion) ( 
db.execSQL("DROP TABLE IF EXISTS " + STUDENTS TABLE NAME 
onCreate(db); 


j 


@Override 
public boolean onCreate() { 
Context context - getContext(); 
DatabaseHelper dbHelper - new DatabaseHelper(context); 
AXIS 
* Create a write able database which will trigger its 
* creation if it doesn't already exist. 


AU. 
db = dbHelper.getwritableDatabase(); 
return (db -- null)? false:true; 
j 
@Override 


public Uri insert(Uri uri, ContentValues values) { 
AER 
* Add a new student record 
ad 
long rowID = db.insert( STUDENTS TABLE NAME, "", values); 
EXER 
* If record is added successfully 
mS 
if (rowID » 0) 
{ 
Uri uri = ContentUris.withAppendedId(CONTENT URI, rowID), 
getContext().getContentResolver().notifyChange( uri, null. 
return uri; 


j 

throw new SQLException("Failed to add a record into " + uri), 
j 
@Override 


public Cursor query(Uri uri, String[] projection, String select: 
String[] selectionArgs, String sortOrder) { 


SQLiteQueryBuilder qb = new SQLiteQueryBuilder(); 
qb.setTables(STUDENTS TABLE NAME); 


switch (uriMatcher.match(uri)) ( 
case STUDENTS: 
qb.setProjectionMap(STUDENTS PROJECTION MAP); 
break; 
case STUDENT ID: 
qb.appendwhere( ID + "=" + uri.getPathSegments().get(1)), 


j 


break; 
default: 
throw new IllegalArgumentException("Unknown URI " + uri); 


j 
if (sortOrder == null || sortOrder == ""){ 
Ce 
* By default sort on student names 
25 
sortOrder - NAME; 
j 
Cursor c = gb.query(db, projection, selection, selecti 
null, null, sortOrder); 
EXER 


* register to watch a content URI for changes 
2s 
c.setNotificationUri(getContext().getContentResolver(), uri), 


return c; 


QOverride 
public int delete(Uri uri, String selection, String[] selection/ 


j 


int count - 0; 


switch (uriMatcher.match(uri)){ 

case STUDENTS: 
count = db.delete(STUDENTS TABLE NAME, selection, selectic 
break; 

case STUDENT ID: 
String id - uri.getPathSegments().get(1); 


count = db.delete( STUDENTS TABLE NAME, ID + "=" + id 
(!TextUtils.isEmpty(selection) ? " AND (" + 
selection + ')' : ""), selectionArgs); 

break; 

default: 


throw new IllegalArgumentException("Unknown URI " + uri); 


j 


getContext().getContentResolver().notifyChange(uri, null); 
return count; 


QOverride 
public int update(Uri uri, ContentValues values, String selecti« 


String[] selectionArgs) { 
int count = 0; 


switch (uriMatcher.match(uri)){ 
case STUDENTS: 
count = db.update(STUDENTS TABLE NAME, values, 
selection, selectionArgs); 
break; 
case STUDENT ID: 


count = db.update(STUDENTS TABLE NAME, values, ID + 
"= " + uri.getPathSegments().get(1) + 
(!TextUtils.isEmpty(selection) ? " AND (" + 


selection + ')' : ""), selectionArgs); 
break; 


default: 
throw new IllegalArgumentException("Unknown URI " + uri ), 
j 


getContext().getContentResolver().notifyChange(uri, null); 
return count; 


j 


QOverride 
public String getType(Uri uri) ( 
switch (uriMatcher.match(uri)){ 
Jf etes 
* Get all student records 
Sy 
case STUDENTS: 
return "vnd.android.cursor.dir/vnd.example.students"; 
EX 
* Get a particular student 
oy 
case STUDENT_ID: 
return "vnd.android.cursor.item/vnd.example.students"; 
default: 


throw new IllegalArgumentException("Unsupported URI: " + i 





以 下 将 AndroidManifest.xml 文件 的 内 容 修改 。 在 这 里 添加 了 <provider.../> 标 签 ， 
包括 内 容 提供 者 : 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com.example.mycontentprovider" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com.example.mycontentprovider .MainActivil 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 
«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
«provider android: name="StudentsProvider" 
android: authorities="com.example.provider.College"> 
</provider> 
</application> 


</manifest> 
PL 必 


以 下 将 res/layout/activity_main.xml 文件 的 内 容 包 括 一 个 按钮 来 自 定义 广播 意 
图 : 





«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 
<TextView 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="Name" /> 
<EditText 
android: id="@+id/txtName" 
android: layout_height="wrap_content" 
android: layout_width="fill_parent" /> 
<TextView 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="Grade" /> 
<EditText 
android: id="@+id/txtGrade" 
android: layout_height="wrap_content" 
android: layout_width="fill_ parent" /> 
<Button 
android: text="Add Name" 
android: id="@+id/btnAdd" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: onClick="onClickAddName" /> 
<Button 
android: text="Retrieve Students" 
android: id="@+id/btnRetrieve" 
android: layout_width="fill_parent" 
android: layout_height="wrap_content" 
android: onClick="onClickRetrieveStudents" /> 

</LinearLayout> 


ee 
确保 res/values/strings.xml 文件 有 以 下 内 容 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">MyContentProvider</string> 
<string name="action_settings">Settings</string> 
«string name-"hello world">Hello world!</string> 


</resources>; 
现在 运行 刚刚 创建 的 应 用 程序 MyContentProvider。 假 设 设置 AVD 并 且 已 经 做 好 了 


环境 设置 。 要 从 Eclipse 运行 的 应 用 程序 ， 从 工具 栏 打开 一 个 项 目的 活动 文件 ， 并 单 
# “Run” O Bis, Eclipse AVD 安装 的 应 用 程序 后 并 启动 它 ， 如 果 设 置 和 应 用 程序 


没有 问题 ， 它 会 启动 显示 仿真 器 窗口 〈 要 耐心 ， 可 能 有 点 慢 ， 由 你 计算 机 的 速度 决 
E) : 


Add Name 


Retrieve Students 





Yiibai.com 


现在 输入 学 生 姓 名 和 年 级 ， 最 后 单 击 “Add Name” 按 钮 ， 将 增加 学 生 记 录 到 数据 库 

中 ，ContentProvider URI 也 一 起 添加 到 数据 库 中 ， 底 部 显示 的 记录 数 ， 并 会 闪烁 一 
条 消息 。 此 操作 使 得 我 们 的 insert() 方 法 的 使 用 。 让 我 们 重复 这 个 过 程 ， 我 们 的 内 容 
提供 者 在 数据 库 中 添加 一 些 更 多 的 学 生 信 息 。 


Add Name 


Retrieve Students 





content://com.example.provider.College/ 
students/2 





正在 添加 记录 在 数据 库 中 ， 现 在 其 时 间 让 ContentProvider 来 给 我 们 这 些 记录 回 ， 所 
以 让 我 们 的 单 击 检 索 学 生 按 钮 ， 这 将 获取 并 显示 所 有 记录 这 是 按照 我 们 执行 query() 


法 。 


Add Name 





Retrieve Students 
1, John, 5th 


可 以 编写 活动 MainActivity.java 文 件 提 供 的 回调 函数 ， 然 后 修改 用 户 界面 ， 更 新 和 
删除 操作 按钮 添加 和 读 操作 以 同样 的 方式 ， 因 为 我 们 已 经 做 了 更 新 和 删除 操作 。 


通过 这 种 方式 ， 可 以 使 用 现 有 的 内 容 提供 者 ， 如 地 址 和 泗 ， 或 不 错 的 面向 数据 库 应 用 
开发 ， 可 以 使 用 内 容 提供 者 的 概念 ， 可 以 执行 所 有 的 数据 库 操 作 ， 如 排序 读 ， 写 ， 
更 新 和 删除 上 面 的 例子 中 解释 。 














Android 碎 片 /片段 - Android 开 发 教程 


片段 (Fragments) 是 一 个 应 用 程序 的 用 户 界 面 或 行为 活动 ， 使 活动 更 加 模块 化 设 


计 ， 


可 以 放置 在 一 块 。 一 个 片段 是 一 种 子 活动 。 以 下 要 点 有 关 片 段 : 
片段 都 有 自己 的 布局 和 规范 自己 的 行为 与 生命 周期 回调 。 

可 以 添加 或 删除 片段 在 活动 而 活动 运行 。 

可 以 将 多 个 片段 在 一 个 单一 的 活动 ， 建 立 一 个 多 窗 格 UI。 
片段 可 用 于 多 种 活动 。 


片段 的 生命 周期 是 密切 相关 ， 其 主机 活动 的 生命 周期 ， 表 示 当 活动 暂停 时 ， 所 
有 的 片段 也 将 停止 活动 。 


片段 可 以 实现 的 行为 当 没 有 用 户 界 面 组 件 。 
片段 加 入 被 加 入 到 Android API 在 Honeycomb 版 本 的 Android (API 版 本 11) o 


创建 片段 可 以 扩展 Fragment 类 并 在 活动 的 布局 文件 中 声明 片段 ， 可 以 插入 到 活动 
布局 的 一 个 片段 到 <fragment> 元 素 。 


介绍 


动 。 


片段 之 前 ， 有 一 个 限制 ， 因 为 可 以 在 一 个 特定 的 时 间 点 ， 屏 幕 上 只 显示 单个 活 


所 以 不 能 够 分 割 设备 屏幕 来 分 别 控制 不 同 部 位 。 但 随 着 引进 片段 得 到 了 更 多 的 


灵活 性 ， 并 在 屏幕 上 同一 时 时 间 可 以 将 一 个 单一 的 活动 取消 限制 。 现 在 有 一 个 单一 
的 acitivity ， 但 每 个 acitivity 可 以 包括 多 个 片段 ， 它 们 有 自己 的 布局 ， 活 动 和 完整 的 
生命 周期 。 


下 面 是 一 个 典型 的 例子 ， 两 个 UI 模块 定义 的 片段 可 以 组 合成 平板 电脑 的 设计 的 一 个 
活动 ， 这 里 在 手机 中 设计 分 离 。 





_ Selecting anitem Selecting an item 
updates Fragment B | | starts Activity B 
Activity A contains Activity A contains Activity B contains 
Fragment A and Fragment B Fragment A Fragment B 


ZiouüLcon 


应 用 程序 散 入 活动 A 中 两 个 片段 ， 在 一 个 平板 大 小 的 设备 上 运行 。 然 而 在 手机 大 小 
的 屏幕 上 ， 有 两 个 片段 有 足够 的 空间 ， 所 以 Activity A 包括 片段 物品 的 清单 ， 当 用 户 
选择 一 篇 文章 时 ， 它 开始 使 用 Activity B， 包 括 阅读 第 二 片段 的 文章 。 


片段 生命 周期 
Android 的 碎片 有 自己 的 生命 周期 ， 非 常 相似 Android 中 的 Activity, Zk 5 EE j&] 
述 其 生命 周期 在 不 同 阶段 。 
阶段 上 当 被 创建 了 一 个 片段 ， 它 通过 以 下 状态 : 
e onAttach() 
e onCreate() 
e onCreateView() 
e onActivityCreated() 
MEI: 当 片 段 变 得 可 见 ， 它 通过 这 些 状 态 : 
e onStart() 
e onResume() 
阶段 ME: 当 碎 片 进 入 后 台 模 式 ， 它 通过 这 些 状态 : 
e onPaused() 
e onStop() 
阶段 IV: 当 片 段 被 破坏 ， 它 通过 以 下 状态 : 
e onPaused() 
e onStop() 
e onDestroyView() 
e onDestroy() 


e onDetach() 


Activity State Fragment Callbacks 
onAttach() 

* 
onCreate() 


Created 


Y 
onCreateView() 
Í 


* 
onActivityCreated() 


2loppead 





onDestroyView() 
' 
onDestroy() 
' 
onDetach() 
Ai oti. eorn 


如 何 使 用 碎片 ? 
这 里 演示 简单 的 步骤 来 创建 碎片 : 


e 首 务 ， 要 决定 有 多 少 碎片 要 在 活动 中 要 使 用 。 例 如 ， 要 使 用 两 个 片段 义理 设 备 
的 横向 和 纵向 模式 。 


e 在 下 一 页 的 碎片 数量 的 基础 上 上， 创建 类 将 扩展 Fragment 类 。 上 述 片段 类 的 回 
AKA. ALUMS Kem AME. 


e 对 应 每 一 个 片段 ， 需 要 在 XML 文件 中 创建 布局 。 这 些 文件 将 根据 布局 来 定义 碎 


e 最 后 修改 活动 文件 替换 片段 ， 根 据 需要 来 定义 实际 的 退 辑 。 
这 里 是 重要 的 覆盖 在 Fragment 类 的 方法 ， 如 下 列表 : 


e onCreate() 系统 调用 时 创建 片段 。 初 始 化 片段 要 保留 暂停 或 停止 时 的 片段 ， 然 
后 恢复 其 它 组 成 部 分 。 


e onCreateView() 当 片 段 第 一 次 绘制 用 户 界 面 时 ， 系 统 调 用 这 个 回调 。 要 绘制 一 
个 UI 为 片段 ， 必 须 返 回 一 个 View 组 件 ， 此 方法 是 片段 的 根 布 局 。 返 回 空 片段 
不 提供 一 个 Ul。 


e onPause() 系统 调用 此 方法 ， 作 为 第 一 次 指示 用 户 离 开 此 片段 。 这 通常 是 提交 
更 改 操作 ， 持 久 化 时 间 超 过 当前 用 户 会 话 时 间 。 


例子 


下 面 的 这 个 例子 将 解释 如 何 创建 片段 - Fragments。 在 这 里 将 创建 两 个 片段 并 且 当 
其 中 一 个 使 用 的 设 各 是 在 横向 模式 下 ， 另 一 个 片段 将 被 用 在 纵向 模式 下 。 按 照 下 面 
的 步骤 类 似 于 在 前 面 创建 的 Hello World 范 例 : 


步 


述 
" 描述 


使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 其 命名 为 MyFragments 在 一 
个 包 com.example.myfragments 下 ， 使 用 空 活动 。 


主要 活动 文件 MainActivity.java 的 代码 修改 为 如 下 。 在 这 里 将 检查 设备 的 
方向 并 在 不 同 的 片段 之 间 进 行 切换 。 


在 com.example.myfragments 包 下 创建 两 个 java 文 件 PM_Fragment.java 
和 LM_Fragement.java 来 定义 片段 以 及 相关 方法 。 


创建 布局 文件 res/layout/Im_fragment.xml 并 布局 定义 这 两 个 片段 。 
修改 res/layout/activity main.xml 文件 的 默认 内 容 ， 以 包括 两 个 片段 。 
在 res/values/strings.xml 文 件 中 定义 所 需 的 常量 

运行 该 应 用 程序 启动 Android 模拟 器 来 验证 应 用 程序 所 做 的 修改 结果 。 
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以 下 是 主要 活动 文件 的 内 容 
src/com.example.mycontentprovider/MainActivity.java 修改 


package com.example.myfragments; 


import android.os.Bundle; 

import android.app.Activity; 

import android.app.FragmentManager; 
import android.app.FragmentTransaction; 
import android.content.res.Configuration; 
import android.view.WindowManager; 


public class MainActivity extends Activity { 
QOverride 


protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


Configuration config - getResources().getConfiguration(); 


FragmentManager fragmentManager = getFragmentManager(); 


FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 


XU 

* Check the device orientation and act accordingly 

Ey 

if (config.orientation == Configuration.ORIENTATION_LANDSCAPE 
VERE 
* Landscape mode of the device 
ura 


LM Fragment 1s fragment = new LM Fragment(); 

fragmentTransaction.replace(android.R.id.content, 
jelse( 

VASE 

* Portrait mode of the device 

SA 

PM Fragment pm fragment = new PM Fragment(); 

fragmentTransaction.replace(android.R.id.content, 


j 


fragmentTransaction.commit(); 





创建 两 个 的 片段 文件 LM_Fragement.java 和 PM. Fragment.javaft 
com.example.mycontentprovider 包 下 。 


以 下 是 LM_Fragement.java 文 件 的 内 容 


package com.example.myfragments; 


import android.app.Fragment; 

import android.os.Bundle; 

import android.view.LayoutInflater; 
import android.view.View; 

import android.view.ViewGroup; 


public class LM Fragment extends Fragment{ 
QOverride 
public View onCreateView(LayoutInflater inflater, 
ViewGroup container, Bundle savedInstanceState) { 
pe 
* Inflate the layout for this fragment 
i 
return inflater.inflate( 
R.layout.lm fragment, container, false); 


下 面 是 PM_Fragement.java 文件 的 内 容 : 


package com.example.myfragments; 


import android.app.Fragment; 

import android.os.Bundle; 

import android.view.LayoutInflater; 
import android.view.View; 

import android.view.ViewGroup; 


public class PM Fragment extends Fragment{ 
QOverride 
public View onCreateView(LayoutInflater inflater, 
ViewGroup container, Bundle savedInstanceState) { 
A i 
* Inflate the layout for this fragment 
WA 
return inflater.inflate( 
R.layout.pm fragment, container, false); 


创建 两 个 布局 文件 Im. fragement.xml 和 pm. fragment.xml 在 目录 res/layout 
下 。 


以 下 是 Im_fragement.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android: layout_width="fill_ parent" 
android:layout height-"fill parent" 
android: background="#7bae16"> 


<TextView 

android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/landscape_message" 
android: textColor="#000000" 

android: textSize="20px" /> 


<!-- More GUI components go here --> 


</LinearLayout> 


LAB pm fragment.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
android:orientation-"horizontal" 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android: background="#666666"> 


<TextView 

android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/portrait_message" 
android: textColor="#000000" 

android: textSize="20px" /> 


<!-- More GUI components go here --> 


</LinearLayout> 


下 面 res/layout/activity main.xml 文件 的 内 容 ， 其 中 包括 片段 : 


<?xml version="1.0" encoding="utf-8"?> 
«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-z"fill parent" 
android:layout height-"fill parent" 
android: orientation="horizontal"> 


«fragment 

android: name="com.example.fragments" 
android: id="@+id/lm_fragment" 

android: layout_weight="1" 

android: layout_width="O0dp" 
android:layout height-"match parent" /> 


«fragment 

android: name="com.example.fragments" 
android: id="@+id/pm_fragment" 

android: layout_weight="2" 

android: layout_width="0dp" 
android:layout height-"match parent" /> 


«/LinearLayout» 
Sg 
确保 res/values/strings.xml 文件 有 以 下 内 容 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">MyFragments</string> 

<string name="action_settings">Settings</string> 

«string name-"hello world">Hello world!</string> 

«string name="landscape_message">This is Landscape mode fragmer 
«/string» 

«string name="portrait_message">This is Portrait mode fragment 
«/string» 


«/resources» 
El ———— "ncn 


现在 试 着 来 运行 MyFragments 刚刚 创建 的 应 用 程序 。 假 设 创 建 AVD， 同 时 做 好 了 
环境 设置 。 要 从 Eclipse 运行 应 用 程序 ， 首 先 打 开 一 个 项 目的 活动 文件 ， 从 工具 栏 上 
单 击 “Run”@ 图 标 。 Eclipse AVD 安装 应 用 程序 ， 并 和 启动 它 ， 如 果 设 置 和 应 用 都 没 
有 问题 ， 它 会 显示 仿真 器 窗口 ， 看 到 如 下 窗口 ， 点 击 "MENU" 按钮 。 可 能 需要 点 耐 
心 ， 因 为 它 可 能 需要 一 段 时 间 ( 易 百 教程 提示 : 取决 于 你 的 电脑 速度 了 ) 
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r1 MyFragments 





要 改变 模式 ， 模 拟 器 的 屏幕 ， 可 以 做 以 下 操作 : 
e fntcontroltF11 Mac 上 改变 的 风景 ， 图 像 ， 反 之 亦 然 。 
e ctrl+F11 在 Windows. 
e ctri+F11 在 Linux. 
改变 了 模式 以 后 ， 能 够 看 到 的 图 形 用 户 界面 ， 如 下 已 经 实现 了 横向 模式 : 


enc 


isl MyFragments 
This is Landscape mode fragment 





这 样 就 可 以 使 用 相同 的 活动 ， 但 不 同 的 GUI 要 通过 不 同 的 片段 。 根 据 要 求 可 以 使 用 
不 同类 型 的 GUI 组 件 来 创建 不 同 的 GUI。 


Android Intent 过 滤器 - Android 开 发 教程 


Android Intent 是 承载 一 个 意图 ， 即 对 象 。 将 消息 从 一 个 组 件 传 到 另 一 个 组 件 ， 在 
应 用 程序 或 应 用 程序 之 外 。|ntent 之 间 沟 通信 息 的 任何 应 用 程序 的 三 个 核心 组 件 - 
活动 ， 服 务 和 广播 接收 器 。 


意图 本 身 是 一 个 Intent 对 象 ， 是 一 种 被 动 的 数据 结构 保持 将 要 执行 的 动作 的 抽象 


描述 。 


例如 ， 让 我 们 假设 有 一 个 Activity ， 需 要 和 启动 电子 邮件 客户 端 和 发 送 电子 邮件 ， 使 
用 Android 设 备 。 为 了 达到 这 个 目的 ，Activity 会 随 着 适当 选择 器 ， 一 个 
ACTION_SEND 发 送 到 Android Intent 解析 器 。 指 定 的 选择 器 提供 适当 的 接口 供用 
户 选择 如 何 发 送 电子 邮件 数据 。 


例如 ， 有 一 个 Activity ， 需 要 在 Android 设备 上 用 Web 浏 览 器 打开 网 址 。 为 了 达到 
这 个 目 的 Activity 将 发 送 ACTION _WEB_SEARCH Intent 到 Android Intent 解析 器 ， 
并 在 Web 浏 览 器 中 打开 给 定 的 URL。Intent 解析 器 解析 通过 一 个 活动 列表 ， 并 选择 

一 个 最 合适 的 Intent ， 在 这 种 情况 下 ， 就 是 Web 浏 览 器 活动 。Intent 通 过 网 页 解析 
后 ， 网 页 浏览 器 启动 Web 浏览 器 活动 。 


分 开机 制 对 于 每 种 类 型 的 组 件 提供 意图 ， 如 : 活动 ， 服 务 和 广播 接收 器 。 
S.N. 方法 & 描述 


Context. startActivity() Intent 对 象 传递 给 此 方法 来 启动 一 个 新 的 活动 或 
获得 现 有 活动 来 做 一 些 新 的 东西 。 


Context.startService() Intent 对 象 传递 给 此 方法 来 启动 服务 或 提供 新 的 
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? SEINE BOERS 
3 Context.sendBroadcast() Intent 对 象 传 递 给 这 个 方法 消息 给 所 有 感 兴 
趣 的 广播 接收 器 。 
Intent 对 象 


Intent 对 象 是 成 捆 的 信息 ， 这 些 信息 所 使 用 的 组 件 ， 它 接收 的 意图 和 Android 系 统 中 
的 信息 。 


Intent 对 象 可 以 基于 它 是 什么 交流 或 要 执行 ， 包 含 以 下 组 件 : 

动作 

强制 Intent 对 象 是 一 个 字符 串 ， 命 名 要 执行 操作 或 广播 意图 ， 正 在 发 生 的 动作 和 报 
告 。 动 作 在 很 大 程度 上 决定 意图 对 象 的 其 余部 分 的 结构 如 何 。Intent 类 定义 了 一 些 
动作 常数 对 应 不 同 的 意图 。 下 面 列 出 的 是 Android Intent 标 准 动作 

动作 在 一 个 Intent 对 象 的 setAction() 方法 可 以 设置 ， 通 过 getAction() 方法 读 取 。 


数据 


要 采取 动作 的 数据 的 URI 和 该 数据 的 MIME 类 型 。 例 如 ， 如 果 动 作 字段 
ACTION_EDIT， 在 数据 字段 将 包含 要 显示 的 编辑 的 文档 的 URI。 


setData() 方 法 指定 数据 仅 作 为 URI 的 setType() 指 定 它 只 能 作为 一 个 MIME 类 型 ， 和 
setDataAndType() 指 定 它 作 为 一 个 URI 和 MIME 类 型 。 污 取 的 URI 由 getData() 和 
getType(). 


操作 /数据 对 的 一 些 例 子 是 : 
S.N. 动作 /数据 对 和 说 明 


ACTION VIEW content://contacts/people/1 显示 有 关 其 标识 符 
为 “人 的 人 的 信息 。 


ACTION DIAL content://contacts/people/1 显示 电话 拨号 程序 已 填充 
BA. 


3 ACTION VIEW tel:123 显示 电话 技 号 程序 已 填充 的 给 定数 。 
4 ACTION_DIAL tel:123 显示 电话 拨号 程序 已 填充 的 给 定数 。 
ACTION EDIT content://contacts/people/1 编辑 有 关 其 标识 符 为 “1” 的 
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人 的 信息 。 
6 ACTION VIEW content://contacts/people/ 显示 人 的 列表 ， 用 户 可 以 
浏览 。 
类 别 


类 别 是 Intent 对 象 一 个 可 选 部 分 ， 这 是 一 个 字符 串 ， 其 中 包含 应 该 处 理 这 个 Intent 
组 件 的 附加 信息 。 addCategory() 方 法 将 类 别 添加 到 Intent 对 象 ， 
removeCategory() 删除 一 个 类 别 ，GetCategories() 得 到 当前 在 对 象 的 所 有 类 别 集 
合 。 下 面 是 Android 意 图 标准 类 别 列表 。 

要 查看 详细 的 Intent 过 滤器 可 在 下 一 小 节 ， 了 解 如 何 使 用 类 别 ， 选 择 合 适 的 活动 对 
应 的 意图 。 


附加 设备 

这 是 键 - 值 对 ， 可 了 解 更 多 传递 组 件 处 理 intent 的 信息 。 人 额外 内 容 设 置 和 读 取 使 用 
putExtras() 和 getExtras() 方法 。 这 里 是 一 个 Android intent 标准 额外 数据 列表 。 
标志 位 


这 些 标志 是 Intent 对 象 可 选 部 分 ， 并 指示 Android 系 统 如 何 启 动 一 个 活动 以 及 如 何 对 
待 它 在 启动 后 等 等 。 


组 件 名 称 


可 选 字 段 是 一 个 android 组 件 名 称 的 活动 ， 服 务 或 BroadcastReceiver 类 对 象 。 如 果 
Sis, Androidf@Alntent 对 象 的 信息 ， 找 到 一 个 合适 的 目标 ，Intent 对 象 
递 到 指定 类 的 一 个 实例 。 


组 件 名 称 由 setComponent()，setClass() 设 置 ， 由 setClassName() 和 
getComponent() 读 取 。 


Intents 类 型 


有 以 下 两 种 类 型 的 意图 支持 到 Android 4.1 版 本 


显 式 意图 


显示 意图 指定 目标 组 件 的 名 称 ， 通 常用 于 应 用 程序 内 部 消息 - 比如 一 个 活动 启动 从 
服务 或 启动 一 个 组 活动 。 例 如 : 


// Explicit Intent by specifying its class name 
Intent i - new Intent(this, TargetActivity.class); 
i.putExtra("Key1", "ABC"); 

i.putExtra("Key2", "123"); 


// Starts TargetActivity 
startActivity(i); 


隐 陈 意图 


这 些 意图 由 其 的 名 字 指 定 目标 组 件 ， 它 们 通常 用 于 应 用 程序 内 部 消息 - 例如 一 个 活 
动 启动 一 个 附属 服务 或 启动 一 个 姐妹 的 活动 。 例 如 : 


// Implicit Intent by specifying a URI 
Intent i = new Intent(Intent.ACTION_VIEw, 
Uri.parse("http://www.example.com")); 


// Starts Implicit Activity 
startActivity(i); 


目标 组 件 接收 的 意图 可 以 使 用 getExtras() 方 法 来 获得 组 件 发 送 额 外 的 数据 源 。 例 
如 : 


// Get bundle object at appropriate place in your code 
Bundle extras - getIntent().getExtras(); 


// Extract data using passed keys 
String valuei = extras.getString("Key1"); 
String value2 - extras.getString("Key2"); 


例子 


下 面 的 例子 展示 了 Android 意 图 的 功能 ， 局 动 各 种 Android 的 内 置 应 用 。 


步 
TR 


4 
5 


描述 


使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 其 命名 为 IntentDemo 在 
com.example.intentdemo 包 下 。 在 创建 这 个 项 目 ， 请 确保 目标 SDK 并 编译 
在 Android SDK 的 最 新 版 本 为 使 用 更 高 级 别 的 APl。 


修改 src/MainActivity.java 文件 ， 并 添加 代码 来 定义 相应 的 两 个 按钮 ， 即 
两 个 监听 器 。 启 动 浏览 器 ， 并 打开 电话 。 


修改 布局 XML 文件 res/layoutactivity_main.xml 添 加 三 个 按钮 的 设置 为 线性 
布局 。 


修改 res/values/strings.xml 中 定义 所 需 的 常量 值 


运行 该 应 用 程序 启动 Android 模 拟 器 来 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 修改 主要 活动 文件 src/com.example.intentdemo/MainActivity.java 的 内 


Dw 


Z: 


package com.example.intentdemo; 


import 
import 
import 
import 
import 
import 
import 


public 


android.net.Uri; 
android.os.Bundle; 
android.app.Activity; 
android.content.Intent; 
android.view.Menu; 
android.view.View; 
android.widget.Button; 


class MainActivity extends Activity { 


QOverride 
protected void onCreate(Bundle savedInstanceState) ( 


j 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


Button startBrowser - (Button) findViewById(R.id.start browst 
startBrowser.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
Intent i - new Intent(android.content.Intent.ACTION VIE 
Uri.parse("http: //www.example.com")); 
startActivity(i); 


j 
3); 
Button startPhone - (Button) findViewById(R.id.start phone); 
startPhone.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
Intent i - new Intent(android.content.Intent.ACTION VIE 
Uri.parse("tel:9510300000")); 
startActivity(i); 
j 
3); 


@Override 
public boolean onCreateOptionsMenu(Menu menu) { 


// Inflate the menu; this adds items to the action 
// bar if it is present. 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 





Fl res/layout/activity main.xml 文件 的 内 容 : 


«LinearLayout xmlns:android="http://schemas.android.com/apk/res/an¢ 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 


«Button android:id="@t+id/start_browser" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/start_browser"/> 


«Button android:id="@t+id/start_phone" 

android: layout_width="fill_ parent" 

android: layout_height="wrap_content" 

android: text="@string/start_phone" /> 
</LinearLayout> 


aE ups] 


下 面 res/values/strings.xm 定义 两 个 新 的 常量 的 内 容 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">IntentDemo</string> 

<string name="action_settings">Settings</string> 
«string name-"hello world">Hello world!</string> 
«string name="Start_browser">Start Browser</string> 
«string name-"start phone"»Start Phone</string> 


«/resources» 


EA EF AndroidManifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 
«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com.example.intentdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com.example.intentdemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
«action android: name="android.intent.action.MAIN" 


«category android:name="android.intent.category.LAl 


</intent-filter> 
</activity> 
</application> 


</manifest> 
E 


现在 运行 IntentDemo 应 用 程序 。 假 设 创建 AVD 同 时 做 正确 的 环境 设置 。 要 从 
Eclipse 运行 的 应 用 程序 ， 打 开 一 个 项 目的 活动 文件 ， 并 从 工具 栏 上 单 击 “Run” 图 
标 。 Eclipse AVD 安 装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 一 切 都 设置 和 应 用 没有 问题 ， 
它 会 显示 以 下 模拟 器 窗口 : 


eo 
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Start Browser 


Start Phone 


Yiibai.com 


现在 点 击 开 始 浏览 按钮 ， 这 将 启动 一 个 浏览 器 配置 并 显 
http://www.example.com 如 个 所 示 ， : 
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www.example.com 


Example Domain 


This domain is established to be used for 
illustrative examples in documents. You may 
use this domain in examples without prior 
coordination or asking for permission. 


More information... 


Yiibai.com 


类 似 的 方式 ， 可 以 启动 手机 界面 使 用 开始 电话 按钮 ， 这 人 允许 拨打 已 经 给 定 的 电话 号 
码 。 


Intent 过 滤器 


上 面 已 经 看 到 了 意图 如 何 用 来 调用 一 个 活动 。 Android 操 作 系 统 使 用 过 滤器 来 查 明 
活动 ， 服 务 和 广播 接收 器 能 够 处 理 指定 的 一 组 动作 ， 类 别 。 使 用 <intent-filter> 元 素 
在 manifest 文件 中 ， 列 出 了 动作 ， 类 别 和 数据 类 型 相关 联 的 活动 ， 服 务 或 广播 接收 
LT. 

EA FX AndroidManifest.xml 文件 中 的 一 部 分 ， 指 定 活动 


com.example.intentdemo.CustomActivity 的 两 个 动作 ， 类 和 数据 ， 下 面 是 可 以 调用 
的 一 个 例子 : 


«activity android:name=".CustomActivity" 
android: label="@string/app_name"> 
<intent-filter> 
«action android: name="android.intent.action.VIEW" /> 
«action android: name="com.example.intentdemo.LAUNCH" /> 
<category android:name="android.intent.category.DEFAULT" /> 
<data android:scheme="http" /> 
</intent-filter> 
</activity> 


s] | 
活动 的 定义 是 随 着 上 面 提 到 的 过 滤器 ， 活 动 将 使 用 android.intent.action.VIEW 或 


com.example.intentdemo.LAUNCH 动作 提供 其 类 别 来 调用 这 个 活动 ， 否 则 使 
用 android.intent.category.DEFAULT。 


«data» 元 素 活 动 被 称 为 指定 数据 类 型 ， 上 面 的 例子 中 自 定义 活动 的 数据 以 "http://" 
开始 


有 可 能 在 只 是 一 个 意图 的 情况 下 ， 可 以 通过 一 个 以 上 的 活动 或 服务 的 过 滤器 ， 用 户 
可 能 会 被 要 求 指定 激活 哪个 组 件 。 可 以 发 现 如 果 没 有 指定 目标 ， 则 会 引发 异常 。 


以 下 测试 Android 检查 在 调用 活动 前 : 


e 如 上 图 所 示 ， 但 这 个 列表 不 能 为 空 ， 可 能 会 列 出 多 个 过 滤器 <intent-filter> 动 
作 ， 一 个 过 滤器 必须 至 少 包含 一 个 <action> 元 素 ， 否 则 会 阻止 所 有 意图 。 如 果 
有 一 个 以 上 的 动作 列 出 ， 那 么 Android 将 党 试 匹配 在 调用 活动 之 前 所 提 到 的 其 
中 一 个 动作 。 


e 过 滤器 <intent-filter> 可 能 列 出 需 个 ， 一 个 或 一 个 以 上 。 如 果 没 有 类 被 提 到 |， 
Android 也 能 通过 这 个 测试 ， 但 如 果 超 过 一 个 类 提 到 通过 类 的 测试 意图 ， 在 过 
滤器 中 ， 每 一 个 类 中 的 Intent 对 象 必 须 符合 一 个 类 。 


每 个 <data> 元 素 可 以 指定 一 个 URI 和 数据 类 型 (MIME 媒体 类 型 ) 。 单 独 的 属 
性 ， 如 方案 ， 主 机 ， 端 口 和 路 径 URI 的 每 个 部 分 。 同 时 包含 URI 和 数据 类 型 的 
一 个 Intent 对 象 通过 测试 ， 只 有 当 它 的 类 型 在 过 滤器 列 出 的 类 型 相 匹配 数据 类 
型 的 一 部 分 。 


例子 


下 面 是 修改 上 面 例子 的 一 个 例子 。 在 这 里 将 看 到 Android 如 何 解 决 冲突 ， 如 果 一 个 
意图 调用 定义 了 两 个 活动 ， 接 下 来 如 何 调用 自 定义 活动 使 用 一 个 过 滤器 ， 第 三 个 是 
一 个 在 例外 情况 下 ， 如 果 Android 不 提交 适当 的 活动 意图 定义 。 
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描述 


使 用 Eclipse IDE 6) Android 应 用 程序 ， 并 将 其 命名 为 IntentDemo 在 一 
个 包 com.example.intentoemo 下 。 在 创建 这 个 项 上 目前， 确保 目 标 SDK 编 译 
在 Android SDK 的 最 新 版 本 或 使 用 更 高 级 别 的 API。 


修改 src/MainActivity.java 文件 ， 并 添加 代码 来 定义 相应 的 布局 文件 中 定 
义 了 三 个 按钮 的 监听 器 。 


添加 一 个 新 的 src/CustomActivity.java 文件 ， 将 由 不 同 的 意图 来 调用 一 个 
自 定义 的 活动 。 


修改 布局 XML 文 件 res/layout/activity_main.xml 添加 三 个 按钮 的 线性 布 


Fo 


添加 一 个 布局 XML 文件 res/layout/custom_view.xml， 在 其 中 添加 一 个 简单 
的 <TextView> 来 显示 通过 意图 传递 的 数据 。 


修改 res/values/strings.xml 定义 所 需 的 常量 值 


修改 AndroidManifest.xml 添加 <intent-filter> 定义 规则 ， 来 自 定 义 意 图 调 
用 活动 。 


运行 该 应 用 程序 启动 Android 模 拟 器 ， 并 确认 在 应 用 修改 变化 的 结果 。 


以 下 是 内 容 是 修改 了 主要 活动 文件 src/com.example.intentdemo/MainActivity.java. 


package com.example.intentdemo; 


import android.net.Uri; 

import android.os.Bundle; 
import android.app.Activity; 
import android.content.Intent; 
import android.view.Menu; 
import android.view.View; 
import android.widget.Button; 


public class MainActivity extends Activity { 


QOverride 
protected void onCreate(Bundle savedInstanceState) { 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


// First intent to use ACTION VIEW action with correct data 
Button startBrowser a - (Button) findViewById(R.id.start brov 
startBrowser a.setOnClickListener(new View.OnClickListener() 
public void onClick(View view) { 
Intent i - new Intent(android.content.Intent.ACTION VIE 
Uri.parse("http: //www.example.com")); 
startActivity(i); 


} 
+); 


// Second intent to use LAUNCH action with correct data 
Button startBrowser_b = (Button) findViewById(R.id.start_brov 
startBrowser b.setOnClickListener(new View. OnClickListener() 
public void onClick(View view) { 
Intent i = new Intent("com.example.intentdemo.LAUNCH", 
Uri.parse("http://www.example.com")); 
startActivity(i); 
} 
}); 


// Third intent to use LAUNCH action with incorrect data 
Button startBrowser c = (Button) findViewById(R.id.start_brov 
startBrowser c.setOnClickListener(new View.OnClickListener() 
public void onClick(View view) { 
Intent i = new Intent("com.example.intentdemo.LAUNCH", 
Uri.parse("https://www.example.com")); 
startActivity(i); 
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QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the 

// action bar if it is present. 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 





以 下 是 修改 的 主要 活动 文件 的 内 容 
src/com.example.intentdemo/CustomActivity.java. 


package com.example.intentdemo; 


import android.app.Activity; 
import android.net.Uri; 

import android.os.Bundle; 
import android.widget.TextView; 


public class CustomActivity extends Activity { 
QOverride 
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.custom view); 


TextView label - (TextView) findViewById(R.id.show data); 


Uri url = getIntent().getData(); 
label.setText(url.toString()); 


LAB res/layout/activity main.xml 文件 的 内 容 : 


«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 


<Button android:id="@+id/start_browser_a" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/start_browser_a"/> 


«Button android:id="@+id/start_browser_b" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/start_browser_b"/> 


<Button android:id="@+id/start_browser_c" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/start_browser_c"/> 


</LinearLayout> 


IE 





Fl res/layout/custom_view.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: orientation="vertical" 
android: layout_width="fill_parent" 
android: layout_height="fill_parent" > 


<TextView android: id="@+id/show_data" 
android: layout_width="fill_ parent" 
android: layout_height="400dp"/> 


</LinearLayout> 


«| I 








下 面 res/values/strings.xml 文件 内 容 中 定义 两 个 新 的 常量 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">IntentDemo</string> 

<string name="action_settings">Settings</string> 

«string name-"hello world">Hello world!</string> 

«string name-"start browser a"»Start Browser with VIEW action<, 
«string name-"start browser b'"»-Start Browser with LAUNCH actior 
«string name-"start browser c'»-Exception Condition</string> 


«/resources» 
QE 


以 下 是 AndroidManifest.xml 文件 的 默认 内 容 : 
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<?xml version="1.0" encoding="utf-8"?> 

«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com.example.intentdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 
<application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com.example.intentdemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
<activity android:name="com.example.intentdemo.CustomActiv: 
android: label="@string/app_name"> 
<intent-filter> 
<action android:name="android.intent.action.VIEW" /> 
«action android: name="com.example.intentdemo. LAUNCH" 
«category android:name="android.intent.category.DEFAl 
<data android:scheme="http" /> 
</intent-filter> 
</activity> 
</application> 


</manifest> 





要 运行 IntentDemo 应 用 程序 。 假 设 创 建 了 AVD 并 设置 了 环境 。 要 从 Eclipse 运行 应 
用 程序 ， 打 开 一 个 项 目的 活动 文件 ， 从 工具 栏 上 单 击 “Run”@ 图 标 。 Eclipse AVD 
安装 的 应 用 程序 并 和 启动 它 ， 如 果 一 切 设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 


窗口 : 


5554. VirtualAVD 







]- IntentDemo 
Start Browser with VIEW action 
Start Browser with LAUNCH action 


Exception Condition 


现在 ,开始 第 一 个 按钮 "Start Browser with VIEW Action”。 这 里 定义 了 自 定义 活动 过 
滤器 “android.intent.action.VIEW”， 并 且 已 经 有 一 个 默认 的 活动 ， 由 Android 启动 
Web 浏 览 器 视图 定义 动作 ， Bit android 显示 以 下 两 个 选项 来 选择 要 启动 的 活动 。 


eo 5554: VirtualAVD 
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r 
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ES 
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Browser IntentDemo 





现在 ， 如 果 选 择 浏览 器 ， 那 么 Android 将 启动 网 页 浏览 器 并 打开 example.com 网 
站 ， 但 2 IndentDemo"” 选 项 ， 那 么 Android 将 启动 CustomActivity 什 么 也 不 
做 ， 只 不 过 是 捕捉 传递 的 数据 ， 并 显示 在 文本 视图 如 下 : 


5554-VirtualAVD 









© IntentDemo 


http://www.example.com 


现在 使 用 后退" 按钮 ， 并 点 击 “Start Browser with LAUNCH Action” 按 钮 ， 这 里 
Android 应 用 过 滤器 来 选择 定义 活动 ， 只 需 启动 自 定义 活动 ， 再 次 显示 以 下 画面 : 


eno 5554:-VirtualAVD 
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http://www.example.com 


Yiibai.com 


同样 ， 返 回 使 用 “后 退 " 按 钮 ， 并 点 击 “Exception Condition’, x BAndroidix, 
图 找 出 一 个 有 效 的 过 滤器 ， 对 于 给 定 intent， 它 没有 找到 一 个 有 效 活动 定义 ， 因 为 
在 这 个 时 候 ， 已 经 数据 使 用 HTTPS， 而 不 是 HTTP， 虽 然 是 一 个 正确 的 动作 ， 但 是 
Android 抛 出 一 个 异常 ， 并 显示 以 下 画面 : 


eo 5554: VirtualAVD 





Unfortunately, IntentDemo has 
stopped. 


Android UI 布局 -Android 开 发 教程 


用 户 界 面 的 基本 构建 块 是 创建 View 类 View 对 象 ， 并 占据 屏幕 上 的 一 个 矩形 区 域 ， 负 
责 绘图 和 事件 处 理 。 View 是 用 于 创 建交 互 式 UI 组 件 ， 它 是 按钮 ， 文 本 框 等 部 件 的 基 


Xa 


ViewGroup 是 View 的 一 个 子 类 ， 并 提供 了 无 形 的 容器 ， 容 纳 其 他 视图 或 其 他 
ViewGroup 定 义 布 局 属性 。 


第 三 个 层次 ， 不 同 的 布局 是 ViewGroup 类 的 子 类 ， 一 个 典型 的 布局 定义 为 Android 
用 户 界面 ， 并 且 可 以 在 运行 时 创建 ， 使 用 View/ViewGroup 对 象 可 视 结构 或 者 可 以 
声明 布局 ， 使 用 简单 的 XML 文 件 main_layout.xml， 这 个 文件 在 项 目 res/layout 文 件 
夹 中 。 


本 教程 是 更 多 是 关于 创建 基于 图 形 用 户 界面 XML 文件 的 布局 定义 。 布 局 可 以 包含 任 
可 类 型 的 部 件 ， 如 按钮 ， 标 签 ， 文 本 框 等 等 。 以 下 是 一 个 简单 的 XML 文件 的 
LinearLayout 例子 


<?xml version="1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android="http://schemas.android.com/apk/res/ant 
android: layout_width="fill_parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 
<TextView android: id="@+id/text" 
android: layout_width="wrap_content" 
android:layout height-"wrap content" 
android:text-"This is a TextView" /> 
«Button android:id-z"Q-id/button" 
android:layout width-z"wrap content" 
android:layout height-"wrap content" 
android:text-'"This is a Button" /> 


<!-- More GUI components go here --> 
</LinearLayout> 


布局 定义 之 后 ， 可 以 从 应 用 程序 代码 加 载 的 布局 资源 ， 在 Activity.onCreate() 回 调 实 
现 ， 如 下 所 示 : 





public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


Android 布 局 类 型 


有 一 些 Android 提 供 的 布局 ， 可 以 使 用 在 几乎 所 有 的 Android 应 用 程序 提供 不 同 的 视 
图 ， 外 观 和 风格 。 


S.N. 布局 和 说 明 

1 Linear Layout LinearLayout 视 图 组 ， 所 有 的 子 视图 在 单一 的 方向 对 齐 ， 
垂直 或 水 平 。 

2 Relative Layout RelativeLayout 相 对 位 置 显 示 子 视图 的 视图 组 。 

3 Table Layout TableLayout 一 种 视图 ， 组 视图 分 为 行 和 列 。 

4 Absolute Layout AbsoluteLayout 使 能 够 指定 其 子 视 图 的 确切 位 置 。 

5 Frame Layout FrameLayout 屏幕 上 是 一 个 占 位 符 ， 可 以 用 它 来 显示 一 
个 单一 的 视图 。 

6 List View ListView 显 示 滚 动 项 目 列表 视图 组 。 

7 Grid View GridView 网 格 控件 是 一 种 ViewGroup 用 于 显示 一 个 二 维 ， 滚 
动 的 网 格 的 项 目 。 

布局 属性 


每 个 布局 都 有 一 组 属性 ， 它 定义 布局 的 视觉 属性 。 所 有 布局 中 ， 有 几 个 共同 的 属性 
和 其 他 属性 布局 。 以 下 是 常见 的 属性 并 可 以 应 用 到 所 有 的 布局 中 : 


属性 描述 


android:id 唯一 地 标识 该 视图 的 ID 
android:layout width 布局 的 宽度 

android:layout height 这 是 布局 的 高 度 

android:layout marginTop 这 是 关于 布局 的 顶 侧 的 额外 的 空间 
android:layout_marginBottom 在 布局 上 的 底 侧 的 额外 的 空间 
android:layout marginLeft 在 布局 上 的 左 侧 的 额外 的 空间 
android:layout marginRight 在 右 侧 的 布局 的 额外 空间 
android:layout gravity 它 指定 子 视图 被 定位 
android:layout weight 指定 有 多 少 布局 额外 的 空间 应 该 分 配给 视 
android:layout x 指定 布局 的 x 坐 标 

android:layout y 此 指定 布局 的 y 坐 标 
android:layout width 布局 的 宽度 

android:layout width 布局 的 宽度 

android:paddingLeft 布局 的 左 填充 
android:paddingRight 布局 的 右 填 充 
android:paddingTop 布局 顶部 填充 
android:paddingBottom 布局 底部 填充 


这 里 布局 /视图 的 宽度 和 高 度 的 尺寸 可 以 指定 在 DP (密度 独立 像素 ) , SP (规模 独 
立 像素 ) ，PT (点 为 1/172 英 寸 ) ，PX (像素 ) , mm (BRK), x CRY). 


可 以 指定 宽度 和 高 度 精确 的 测量 ， 但 更 多 的 时 候 ， 使 用 这 些 常 量 作为 宽度 或 高 度 设 
iB: 


e android:layout width2wrap content 告诉 视图 ， 其 内 容 所 需要 的 尺寸 大 小 本 
身 。 


e android:layout width-fill parent 告诉 视图 如 其 父 视图 一 样 尺寸 大 小 。 


Gravity 属性 定位 视图 对 象 中 起 着 重要 的 作用 ， 它 可 以 采取 一 个 或 多 个 CIS) 的 
恒定 值 ， 具 体 如 下 : 


fala 


常 
top 
bottom 
left 
right 


center vertical 
fill vertical 
center horizontal 
fill horizontal 
center 


fill 


clip vertical 


clip horizontal 


start 


end 


视图 标识 
一 个 视图 对 象 有 一 


EJ 。 
AXE - 


值 
0x30 
0x50 
0x03 
0x05 


0x10 


0x70 


0x01 


0x07 


0x11 


0x77 


0x80 


0x08 


0x00800003 
0x00800005 


个 唯一 的 ID 分 配给 它 


android:id-"Q-id/my button" 


以 下 是 @+ 符号 的 简要 说 明 : 


描述 
推进 对 象 到 其 容器 的 顶部， 不 改变 其 大 小 
推进 对 象 到 其 容器 的 底部 ， 不 改变 其 大 小 


推进 对 象 到 其 容器 的 左 侧 ， 不 改变 其 大 小 
推进 对 象 到 其 容器 的 右 侧 ， 不 改变 其 大 小 
放置 对 象 在 其 容器 的 垂直 中 心 ， 在 不 改变 
其 大 小 


如 果 需 要 的 话 完全 填 满 其 容器 增长 对 象 的 
垂直 尺寸 


放置 对 象 在 其 容器 的 水 平 中 心 ， 
大 小 


如 果 需 要 的 话 完全 填 满 其 容器 增长 的 对 象 
的 水 平 尺寸 


放置 对 象 在 其 容器 的 同时 在 垂 
的 中 心 ， 而 不 改变 其 大 小 


如 果 需 要 的 话 完全 填 满 其 容器 增长 的 对 象 
的 水 平和 垂直 尺寸 


可 以 设置 附加 的 选项 ， 使 项 部 和 /或 子 视图 
ERLERERS SOR. BABES 
垂直 重力 : 项 重力 将 剪辑 底部 边缘 ， 

EDS AMA, HRS ANN 


TAEMA S, EEANN TGUSE 
边缘 夹 在 其 容器 的 边界 。 剪 辑 将 根据 水 平 
重力 : 左 重 力 将 剪辑 的 右边 缘 ， 右 重力 将 
剪辑 的 左边 缘 ， 并 且 也 不 会 夹 两 边 

推进 对 象 到 其 容器 的 开头 ， 不 改变 其 大 小 


推进 对 象 到 其 容器 的 末尾 ， 不 改变 其 大 小 


不 改变 其 


直 和 水 平 轴 


， 用 于 唯一 识别 视图 。ID 在 XML 标签 的 话 法 


e 在 符号 (@) 开头 的 字符 串 表 示 XML 解 析 器 解析 和 扩展 ID 字符 串 的 其 余部 分 ， 
将 其 识别 为 一 个 ID 的 资源 。 


e 加 号 〈+) 表示 ， 这 是 一 个 新 的 资源 名 ， 必 须 创建 并 添加 到 资源 中 。 要 创建 一 
个 视图 对 象 的 实例 ， 并 捕捉 到 它 的 布局 ， 使 用 以 下 命令 : 


Button myButton = (Button) findViewById(R.id.my button); 


Android UI 控件 - Android 开 发 教程 


Android 应 用 程序 的 用 户 界面 是 一 切 ， 用 户 可 以 看 到 并 与 之 交互 。 已 经 解 了 并 用 它 
定位 在 活动 中 的 各 种 视图 的 布局 。 本 章 会 给 详细 视图 的 各 方面 。 


视图 (View) 是 一 个 对 象 绘制 在 屏幕 上 ， 用 户 可 以 互动 的 东西 ，ViewGroup 是 一 个 对 
象 ， 其 中 包含 其 他 View (ViewGroup) 的 对 象 ， 并 可 以 定义 用 户 界 面 的 布局 。 


视图 可 以 定义 在 一 个 XML 文件 ， 它 提供 了 一 个 人 类 可 读 的 结构 布局 ， 类 似 于 HTML 
布局 。 例 如 ， 一 个 简单 的 垂直 布局 ， 文 本 视图 (TextView) 和 按钮 (Button) 看 起 来 像 这 
样 : 


<?xml version="1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android: layout_height="fill parent" 
android:orientation="vertical" > 


<TextView android: id="@+id/text" 
android: layout_width="wrap_content" 
android:layout height-"wrap content" 
android:text-"I am a TextView" /> 

«Button android:id-"Q-id/button" 
android:layout widthz"wrap content" 
android:layout height-"wrap content" 
android:text-"I am a Button" /> 

«/LinearLayout» 


c ————————————————— ET] 





Android UI 控件 


有 一 些 Android 提供 的 UI 控件 ， 人 允许 建立 应 用 程序 的 图 形 用 户 界 面 。 


S.N. UI 控件 和 与 说 明 

1 TextView 这 种 控制 用 于 显示 文本 给 用 户 。 

2 EditText EditText 是 TextView 预 定义 的 子 类 ， 包 括 丰 富 的 编辑 功能 。 

3 AutoCompleteTextView AutoCompleteTextView 是 一 个 视图 ， 它 类 似 于 
EditText， 不 同 之 处 是 在 用 户 键 入 时 ， 它 会 显示 自动 完成 建议 的 列表 。 

4 Button 按钮 式 可 以 被 按压 ， 或 者 点 击 - 由 用 户 执行 动作 。 

5 ImageButton AbsoluteLayout 使 可 以 指定 其 子 视图 的 确切 位 置 。 

6 CheckBox 可 以 由 用 户 来 切换 开 / 关 。 提 供 一 组 可 选择 的 选项 并 不 相互 排 
斥 时 候 呈 现 用 户 ， 应 该 使 用 复 选 框 。 

7 ToggleButton 一 个 开 / 关 按钮 带 有 指示 灯 。 

8 RadioButton 单 选 按钮 有 两 种 状态 : 选中 或 取消 选中 。 

9 RadioGroup RadioGroup 用 于 组 织 一 个 或 多 个 单 选 按钮 。 

10 ProgressBar 进度 条 视图 (ProgressBar) 提供 一 些 日 常任 务 ， 当 在 后 台 
执行 任务 时 ， 给 出 视觉 反馈。 

1 Spinner 一 个 下 拉 列 表 ， 人 允许 用 户 选 择 从 一 组 一 个 值 ( 类 似 HTML 中 的 
select) 

TimePicker TimePicker 视 图 允许 用 户 选择 一 天 中 的 时 间 ， 在 24 小 时 模式 
或 AM/ PM 模式 。 

13 DatePicker TimePicker 视 图 人 允许 用 户 选择 一 天 中 的 时 间 ， 在 24 小 时 模式 
或 AM/PM 模 式 。 

创建 UI 控件 


正如 在 前 面 的 章节 中 ， 视 图 对 象 可 能 有 一 个 唯一 的 ID 分 配给 ， 这 个 唯一 识别 视图 树 
内 。 一 个 视图 ID 在 XML 标签 的 语法 是 : 


android:id-"Q-«id/text id" 


要 创建 一 个 用 户 界面 控件 /视图 /小 工具 ， 必 须 在 布局 文件 中 定义 一 个 视图 /部 件 ， 并 
将 其 分 配 一 个 唯一 的 ID 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android: layout_height="fill_parent" 
android:orientation="vertical" > 


<TextView android: id="@+id/text_id" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android:text="I am a TextView" /> 
</LinearLayout> 
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最 后 控制 对 象 创建 一 个 实例 ， 并 获得 它 的 布局 ， 使 用 以 下 命令 : 


TextView myText = (TextView) findViewById(R.id.text id); 


Android} 4438 - Android 开 发 教程 


事件 是 一 种 有 用 来 收集 用 户 和 与 占用 程序 互动 数据 的 互动 组 件 ， 如 按键 或 触摸 屏 等 放 
置 事件 ， 因 为 每 个 事件 从 Android 框 架 维护 事件 队列 先入 先 出 (FIFO) 基础 上 的 队 
列 。 可 以 在 程序 中 捕获 这 些 事 件 ， 按 要 求 并 采取 适当 的 动作 。 


有 以 下 三 个 概念 涉及 到 Android 事 件 管理 : 


e 事件 监听 器 : 主要 涉及 建立 一 个 Android 的 GUI 视图 类 ，View 类 提供 了 一 些 事 件 
监听 器 。 事 件 监听 器 是 对 象 接收 通知 在 事件 发 生 时 。 


。 事件 监听 器 注册 : 事件 注册 事件 处 理 程 序 被 注册 了 事件 侦 听 器 的 过 程 ， 使 该 多 
理 调用 的 事件 侦 听 器 触发 事件 。 


e 事件 义理 程序 : 当 一 个 事件 发 生 时 ， 已 注册 的 事件 和 事件 监听 器 ， 事 件 监 听 器 
调用 事件 处 理 程序 ， 这 是 实际 处 理事 件 的 方法 。 


事件 侦 听 器 和 事件 处 理 程 序 


事件 处 理 程序 事件 监听 器 说 明 


OnClickListener() 当 用 户 点 击 任意 或 触摸 或 焦点 事件 像 
onClick() 按钮 ， 文 字 ， 图 片 等 ， 将 使 用 onClick() 事 件 义理 程序 来 处 
理 任 何 部 件 的 事件 


OnLongClickListener() 当 用 户 点 击 或 触摸 或 焦点 事件 
onLongClick() 像 按钮 ， 文 本 ， 图 像 等 ， 为 1 秒 以 上 的 任何 插件 时 被 调 
用 。 使 用 onLongClick() 事 件 处 理 程 序 来 人 处理 这 样 的 事件 


OnFocusChangeListener() 当 控 件 失 去 焦点 时 被 调用 。 
onFocusChange() ”用户 进入 离开 视图 项 目 。 使 用 onFocusChange() 事 件 处 
理 程序 来 处 理 这 样 的 事件 


OnFocusChangeListener() 当 用 户 焦点 并 按 下 或 释放 装 
onKey() 置 上 的 硬件 键 时 被 调用 。 将 使 用 onKey() 事 件 义理 程序 来 

义理 这 样 的 事件 

OnTouchListener() 当 用 户 按 下 该 键 时 及 释放 键 ， 或 在 
onTouch() BE EB ES oh FARA. fi FHonTouch() Ex 


理 程序 来 处 理 这 样 的 事件 


OnMenultemClickListener() 当 用 户 选 择 一 个 菜单 项 时 
onMenultemClick() ”被 调用 。 使 用 onMenultemClick() 事 件 处 理 程序 来 处 理 这 
样 的 事件 


还 有 更 多 可 用 作为 View 类 如 : OnHoverListener, OnDragListener 等 ， 应 用 程序 可 
能 需要 一 部 分 的 事件 侦 听 器 。 因 此 ， 建 议 参 考官 方 Android 应 用 程序 开发 文档 ， 开 
发 一 个 复杂 的 应 用 程序 。 


注册 事件 监听 器 : 


事件 注册 事件 处 理 程序 被 注册 事件 侦 听 器 的 过 程 ， 使 处 理 时 调用 事件 侦 听 器 处 理事 
件 。 虽 然 有 一 些 方 法 注册 可 以 任何 事件 的 事件 侦 听 器 ， 但 要 列 出 只 前 3 种 方式 ， 可 
以 根据 实际 情况 使 用 。 


e 使 用 匿名 内 部 类 

e Activity 活动 类 实现 Listener 接 口 

e 使 用 布局 文件 activity main.xml 直接 指定 事件 处 理 程序 (方法) 
下 面 将 提供 三 种 情景 的 详细 的 例子 : 


事件 处 理 举 例 


使 用 匿名 内 邵 类 的 事件 监听 器 注册 


在 这 里 ， 将 创建 一 个 匿名 的 执行 监听 ， 如 果 每 个 类 只 有 一 个 单 控制 器 ， 将 参数 传递 
给 事件 处 理 程序 。 在 这 种 方法 中 的 事件 处 理 方法 可 以 访问 私有 数据 的 活动 。 没 有 提 
及 需要 调用 到 活动 。 


但 是 ， 如 果 声 明 一 个 以 上 人 处理 程序 的 控制 器 ， 剪 切 和 粘贴 代码 的 处 理 程序 和 人 处理 程 
序 的 代码 很 长 ， 代 码 更 难 维护。 

以 下 是 简单 的 步骤 来 展示 我 们 将 如 何 利 用 独立 的 Listener 类 注册 并 捕获 点 击 
(click) 事件 。 类 似 的 方式 ， 可 以 实现 所 需 的 任何 其 他 事件 类 型 的 侦 听 。 


术 
m 描述 
1 使 用 Android Studio 创 建 一 个 Android 应 用 程序 项 目 ， 将 其 命名 为 : 
EventDemo 
2 修改 src/MainActivity.java 程序 文件 ， 以 添加 clicks 4 in Ura8 3t 4^ 38 fe Fe 
定义 的 两 个 按钮 
3 修改 res/layout/activity_main.xml 文件 的 默认 内 容 包 括 Android 的 UI 控件 
4 定义 res/Values/strings.xml 文件 所 需 的 常量 


5 运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 


以 下 是 主 activity 文件 src/com.yiibai.eventdemo/MainActivity.java 的 内 容 。 这 个 文 
件 可 以 包括 每 个 生命 周期 的 根本 方法 。 


package com.yiibai.eventdemo; 


import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.view.View; 
import android.widget.Button; 
import android.widget.TextView; 


public class MainActivity extends Activity { 


QOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


//--- find both the buttons--- 

Button sButton - (Button) findViewById(R.id.button s); 

Button lButton - (Button) findViewById(R.id.button 1); 

// -- register click event with first button --- 

sButton.setOnClickListener(new View.OnClickListener() { 
public void onClick(View v) { 


// --- find the text view -- 
TextView txtView = (TextView) findViewById(R.id.text 
// -- change text size -- 
txtView.setTextSize(14); 
} 
3); 
// -- register click event with second button --- 


lButton.setOnClickListener(new View.OnClickListener() { 
public void onClick(View v) { 


// --- find the text view -- 
TextView txtView = (TextView) findViewById(R.id.text 
// -- change text size -- 
txtView.setTextSize(24); 
} 
3); 
} 
QOverride 


public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 


j 
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Fil res/layout/activity_main.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android: layout_height="fill parent" 
android:orientation="vertical" > 


<Button 

android: id="@+tid/button_s" 

android: layout_height="wrap_content" 
android: layout_width="match_parent" 
android: text="@string/button_small"/> 


<Button 

android: id="@+id/button_1" 

android: layout_height="wrap_content" 
android: layout_width="match_parent" 
android: text="@string/button_large"/> 


<TextView 

android: id="@+id/text_id" 

android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: capitalize="Ccharacters" 
android: text="@string/hello_world" /> 


</LinearLayout> 
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以 下 文件 res/values/strings.xml 定义 了 两 个 新 的 常量 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


«string name="app_name">EventDemo - yiibai.com</string> 
<string name="action_settings">Settings</string> 
«string name-"hello world">Hello world!</string> 
«string name="button_small"> 小 号 字体 </string> 

«string name="button_large"> 大 号 字体 </string> 


</resources> 


以 下 是 AndroidManifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.guidemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.guidemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 


</manifest> 
BEES: 


我 们 堂 斌 运行 EventDemo 应 用 程序 。AVD 安 装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 一 切 
设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





现在 尝试 一 下 ， 会 看 到 两 个 按钮 逐一 的 Hello World 文 本 ， 字 体会 发 生变 化 ， 对 每 次 
点 击 事件 发 生 ， 因 为 注册 的 click 事 件 处 理 方法 被 调用 。 以 上 代码 下 
载 : http://pan.baidu.com/s/1hqrljx6 


注册 使 用 活动 实现 监听 器 接口 


在 这 里 ，activity 类 实现 Listener 接 口 方 法 义理 主 活动 ， 然 后 调用 
setOnClickListener (this) 程序 。 


如 果 应 用 程序 只 有 一 个 单一 的 控件 这 种 方法 是 很 好 的 ， 但 需要 做 进一步 的 编程 检查 
SEROUS (MESE) | RIMES EERSTE, SMETA 
2 作用 。 


下 面 是 简单 的 步骤 来 展示 如 何 实 现 Listener 类 注册 并 捕获 click 事 件 。 类 似 的 方式 ， 
可 以 实现 所 需 的 任何 其 他 事件 类 型 的 监听 。 


步 MTS 
= 描述 


1 我 们 需要 创建 一 个 Android 应 用 程序 : EventDemo2 
修改 src/MainActivity.java 文件 的 内 容 ， 以 添加 click 事 件 侦 听 器 和 处理 程 


序 定义 的 两 个 按钮 

3 上 一 个 例子 中 的 res/layout/activity main.xml 文件 不 用 做 任何 改变 ， 它 仍 
将 如 上 图 所 示 。 

4 上 一 个 例子 中 的 res/values/strings.xml 文件 不 做 任何 变化 ， 如 上 图 所 
7JNo 


5 运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 
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以 下 是 主 活动 活动 文件 src/com.yiibai.eventdemo2/MainActivity.java 的 内 容 。 
文件 可 以 包括 每 个 生命 周期 基础 方法 。 


package com.example.eventdemo; 


import android.os.Bundle; 

import android.app.Activity; 

import android.view.Menu; 

import android.view.View; 

import android.view.View.OnClickListener; 
import android.widget.Button; 

import android.widget.TextView; 


public class MainActivity extends Activity implements OnClickLister 


QOverride 

protected void onCreate(Bundle savedInstanceState) ( 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


//--- find both the buttons--- 
Button sButton (Button) findViewById(R.id.button s); 
Button lButton (Button) findViewById(R.id.button 1); 


// -- register click event with first button --- 
sButton.setOnClickListener(this); 
// -- register click event with second button --- 


lButton.setOnClickListener(this); 
} 


//--- Implement the OnClickListener callback 
public void onClick(View v) { 

if(v.getId() -- R.id.button s) 

{ 


// --- find the text view -- 
TextView txtView = (TextView) findViewById(R.id.text_ic 


// -- change text size -- 
txtView.setTextSize(14); 


return; 
} 
if(v.getId() == R.id.button 1) 
{ 
// --- find the text view -- 
TextView txtView = (TextView) findViewById(R.id.text_ic 
// -- change text size -- 
txtView.setTextSize(24); 
return; 
} 
} 
QOverride 


public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 





我 们 堂 斌 运行 EventDemo2 应 用 程序 。AVD 安 装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 一 切 
设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 


小 号 字体 


大 号 字体 


Hello world! 


现在 党 试 一 下 ， 会 看 到 两 个 按钮 被 点 击 后 "Hello World" 文本 字体 会 发 生变 化 ， 对 
每 次 点 击 事件 ， 注 册 的 click 事件 处 理 方法 被 调用 。 上 面 例子 程序 代码 下 载 地 
HE : http://pan.baidu.com/s/1i3pEvpr 


使 用 布局 文件 ACTIVITY_MAIN.XML 注 册 


在 这 里 事件 处 理 程序 Activity 类 没有 实现 监听 器 接口 ， 也 没有 注册 任何 侦 听 器 方法 。 
相反 使 用 布局 文件 (activity main.xml) ， 通 过 android:onClick 属 性 指定 的 处 理 程 
序 方法 click 事 件 。 可 以 控制 不 同 的 点 击 事件 不 同 的 控制 ， 通 过 不 同 的 事件 处 理 方 

法 。 

事件 处 理 程序 方法 必须 有 一 个 返回 类 型 为 void， 并 作为 一 个 参数 来 检视 。 方 法 名 称 
可 以 是 任意 的 ， 主 类 不 需要 实现 任何 特定 的 接口 。 

这 种 方法 不 会 允许 将 参数 传递 给 监听 器 ，Android 开 发 人 员 将 很 难 知 道 哪 种 方法 处 
理 程 序 控制 ， 需 要 到 activity_main.xml 文 件 查看 才能 知道 。 其 次 ， 不 能 处 理 除 click 
事件 外 的 任何 其 他 事件 。 


以 下 是 简单 的 步骤 来 展示 如 何 能 利用 布局 main.xml 文 件 注册 并 捕获 click 事 件 。 


步 l 
s 
" 描述 


1 创建 一 个 Android 应 用 程序 项 目 : EventDemo3. 
修改 src/MainActivityjava 文 件 ， 以 添加 定义 两 个 按钮 的 click 事 件 侦 听 器 


“ ARBER 

3 修改 布局 文件 res/layout/activity_main.xml， 指 定 这 两 个 按钮 的 事件 处 理 
程序 

文件 res/values/strings.xml 不 用 做 修改 ， 使 用 上 面 的 例子 中 的 内 容 就 可 


5 运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 修改 主 活动 文件 src/com.yiibai.eventdemo/MainActivityjava 的 内 容 。 这 个 文 
件 可 以 包括 每 个 生命 周期 的 基本 方法 。 


package com.example.eventdemo; 


import android.os.Bundle; 
import android.app.Activity; 
import android.view.Menu; 
import android.view.View; 
import android.widget.Button; 
import android.widget.TextView; 


public class MainActivity extends Activity{ 


@Override 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


j 


//--- Implement the event handler for the first button. 
public void doSmall(View v) { 
// --- find the text view -- 
TextView txtView - (TextView) findViewById(R.id.text id); 
// -- change text size -- 
txtView.setTextSize(14); 
return; 
} 
//--- Implement the event handler for the second button. 
public void doLarge(View v) { 
// --- find the text view -- 
TextView txtView - (TextView) findViewById(R.id.text id); 
// -- change text size -- 
txtView.setTextSize(24); 
return; 


j 


QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 


将 以 下 的 res/layout/activity main.xml 文件 的 内 容 。 在 这 里 ， 我 们 必须 给 这 两 个 按 
钮 添加 android:onClick="methodName" ， 这 将 注册 给 定 的 方法 名 ， 以 添加 单 击 事 
件 处 理 程序 。 


<?xml version="1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android="http://schemas.android.com/apk/res/ant 
android: layout_width="fill_ parent" 
android: layout_height="fill parent" 
android:orientation="vertical" > 


<Button 

android: id="@+id/button_s" 

android: layout_height="wrap_content" 
android: layout_width="match_parent" 
android:text-"Qstring/button small" 
android:onClick-"doSmall"/» 


«Button 

android: id="@+id/button_1" 

android: layout_height="wrap_content" 
android: layout_width="match_parent" 
android: text="@string/button_large" 
android: onClick="doLarge"/> 


<TextView 

android: id="@+id/text_id" 

android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android:capitalize-"characters" 
android:text-z"Qstring/hello world" /> 


</LinearLayout> 
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我 们 堂 斌 运行 EventDemo3 应 用 程序 。AVD 上 安装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 一 
切 设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





EventDemo3 





小 号 字体 
大 号 字体 


Hello world! 


现在 党 斌 一下， 会 看 到 两 个 按钮 的 Hello World 文 本 的 字体 会 发 生变 化 ， 对 每 次 点 
击 事 件 ， 注 册 的 click 事 件 处 理 方法 被 调用 。 以 上 代码 下 载 地 
下 : http://pan.baidu.com/s/1nthyBDR 


Android 样 式 和 主题 - Android 开 发 教程 


如 果 已 经 熟悉 在 网 页 设计 中 的 层 生 样式 表 (CSS) ， 了 解 Android 样 式 也 是 非常 相 
似 。 每 个 Android 窗口 小 部 件 ， 可 以 设置 更 改 应 用 程序 外 观 风格 相关 的 属性 。 样 式 
可 以 指定 属性 ， 如 高 度 ， 填 充 ， 字 体 颜色 ， 字 体 大 小 ， 背 景 颜色 以 及 其 它 。 


可 以 指定 这 些 属 性 在 布局 文件 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android: layout_height="fill_parent" 
android:orientation="vertical" > 


<TextView 

android: id="@+id/text_id" 

android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android:capitalize-"characters" 
android: textColor="#00FFO0" 

android: typeface="monospace" 

android: text="@string/hello_world" /> 


</LinearLayout> 
4 BR 


不 过 这 样 一 来 ， 我 们 需要 定义 的 样式 属性 ， 每 个 属性 分 别 用 于 源 代 码 维护 的 角度 来 
看 这 是 非常 不 好 的 。 因 此 ， 样 式 定 义 应 该 放 在 单独 的 文件 ， 如 下 解释 。 





定义 样式 


样式 可 以 定义 在 一 个 单独 的 XML 指 定 布局 的 XML 资 源 文 件 。 此 XML 文 件 位 于 
res/values/ 项 目 目 录 ， 强 制 性 的 样式 文件 中 <resources> 作 为 根 节 点 ，XML 文 件 名 
称 是 任意 ， 但 它 必 须 使 用 .xml 扩 展 名 。 


可 以 定义 每 个 文件 中 使 用 的 多 种 样式 <style> 标 签 ， 但 要 使 用 唯一 的 名 称 来 标识 此 禅 
式 。 Android 样式 属性 设置 使 用 的 <item> 标 签 ， 如 下 图 所 示 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<style name="CustomFontStyle"> 
«item name="android: layout_width">fill_parent</item> 
<item name="android: layout_height">wrap_content</item> 
<item name="android:capitalize">characters</item> 
«item name="android: typeface">monospace</item> 
«item name="android: textSize">12pt</item> 
«item name="android: textColor">#00FFO0</item>/> 
</style> 
</resources> 
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使 用 样式 
样式 定义 之 后 ， 就 可 以 用 它 在 XML 布局 文件 使 用 样式 属性 ， 如 下 所 示 : 


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/an¢ 
android: layout_width="fill_ parent" 
android: layout_height="fill_parent" 
android:orientation="vertical" > 


<TextView 

android: id="@t+id/text_id" 

style="@style/CustomFontStyle" 

android: text="@string/hello_world" /> 
</LinearLayout> 


Aoo a eS, 
要 理解 这 个 概念 涉及 到 Android 的 样式 ， 可 以 检查 样式 实例 。 


样 陈 继 承 
Android 支 持 级 联 样式 表 在 网 页 设计 风格 非常 类 似 继承 这 种 方式 。 可 以 使 用 这 个 继 
承 现 有 的 样式 属性 ， 然后 定义 想 要 更 改 或 添加 属性 。 


其 操作 简单 ， 创 建 一 个 新 的 的 样式 继承 LargeFont 上 述 CustomFontStyle 风 格 定义 ， 
但 字体 的 大 小 变 大 ， 可 以 编写 这 样 的 新 的 样式 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<style name="CustomFontStyle.LargeFont"> 
«item name="android: textSize">20ps</item> 
</style> 
</resources> 


@style/CustomFontStyle.LargeFont 的 XML 布局 文件 ， 可 以 参考 这 个 新 的 样式 。 可 
以 继续 秉承 这 样 多 次 ， 只 要 愿意 ， 周 期 通过 链接 名 称 。 例 如 ， 可 以 扩展 
FontStyle.LargeFont 的 是 红色 的 ， 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<style name="CustomFontStyle.LargeFont.Red"> 
<item name="android: textColor">#FFO000</item>/> 
</style> 
</resources> 


继承 这 种 技术 通过 链接 在 一 起 的 名 字 仅 适 用 于 自己 的 资源 定义 的 样式 。 不 能 继承 : 
Android 内 置 祥 式 的 这 种 方式 。 要 引用 一 个 Android 内 置 风 格 ， 如 TextAppearance， 
必须 使 用 父 属性 ， 如 下 所 示 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
«style name="CustomFontStyle" parent="@android:style/TextAppearé 
<item name="android: layout_width">fill_parent</item> 
<item name="android: layout_height">wrap_content</item> 
<item name="android:capitalize">characters</item> 
<item name="android: typeface">monospace</item> 
«item name="android: textSize">12pt</item> 
«item name="android: textColor">#00FFO0</item>/> 
</style> 
</resources> 


MN 了 人 





Android 主题 


希望 能 够 理解 样式 的 概念 ， 现 在 让 我 们 去 了 解 什么 是 主题 。 主 题 是 什么 ， 主 题 只 不 
过 是 要 Android 应 用 到 整个 活动 或 应 用 程序 中 统一 样式 ， 而 不 是 一 个 单独 的 视图 样 
xh 


因此 ， 当 一 个 样式 应 用 为 主题 ， 将 适用 于 每 一 个 活动 或 应 用 程序 视图 它 支持 每 个 祥 
式 属 性 。 例 如 ， 可 以 应 用 一 个 主题 Activity 活动 的 的 同一 CustomFontStyle 风 格 ， 然 
后 内 部 的 所 有 文本 ， 活 动 都 会 有 绿色 环保 等 宽 字体 。 


要 设置 应用 程序 的 所 有 活动 的 主题 ， 打 开 AndroidManifest.xml 文 件 ， 编 辑 
<application>#; 4 @& 7 android:theme 属性 的 风格 名 称 。 例 如 : 


«application android: theme="@style/CustomFontStyle"> 


但 是 ， 如 果 想 有 一 个 主题 ， 只 是 在 应 用 程序 的 一 个 Activity 活动 ， 然 后 添加 
android:theme 属 性 到 <activity> 标 签 。 例 如 : 


«activity android: theme="@style/CustomFontStyle"> 


有 一 些 由 Android 定 义 的 默认 主题 ， 可 以 直接 使 用 或 继承 父 属性 如 下 : 


«style name="CustomTheme" parent="android: Theme.Light"> 


</style> 
要 理解 这 个 概念 ， 有 关 Android 的 主题 ， 可 以 查看 主题 示例 。 


默认 样式 和 主题 


Android 平 台 提 供 了 一 个 大 集合 ， 可 以 在 应 用 程序 中 使 用 的 风格 和 主题 。 可 以 在 
R.style 类 的 参考 找到 所 有 可 用 的 样式 。 要 使 用 这 里 列 出 的 风格 ， 在 一 个 样式 名 替换 
所 有 下 划 线 。 例 如 ， 可 以 应用 Theme_NoTitleBar 主 题 使 用 

如 “@android:style/Theme.NoTitleBar"。 可 以 看 到 下 面 的 源 代码 为 Android 的 风格 和 
主题 : 


e Android Styles (styles.xml) 


e Android Themes (themes.xml) 


Android 自 定义 组 件 -Android 开 发 教程 


Android 提 供 了 一 个 预 建 的 部 件 ， 如 Button, TextView, EditText, ListView, 
CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView 等 可 以 直接 使 用 
在 Android 应 用 程序 开发 中 ， 但 有 可 能 还 有 一 种 情况 ， 当 不 满意 现 有 可 用 的 窗口 小 
部 件 的 功能 。 Android 提供 创建 自 定义 组 件 功能 ， 定 制 以 满足 需求 。 


如 果 只 需要 进行 小 的 调 现 有 的 小 工具 或 布局 ， 可 以 简单 的 子 类 的 小 工具 或 布局 和 覆 
盖 它 的 方法 ， 这 将 精确 地 控制 屏幕 元 素 的 外 观 和 功能 。 


本 教程 介绍 了 如 何 创 建 自 定义 视图 ， 并 利用 它们 在 应 用 程序 ， 如 下 步骤 。 


创建 一 个 简单 的 目 定 义 组 件 


最 简单 的 创建 自 定义 的 组 件 方 法 是 扩展 现 有 的 widget 类 或 子 类 ， 如 果 想 扩展 现 有 部 
件 ， 如 Button, TextView, EditText, ListView, CheckBox 等 ， 否 则 可 以 从 
android.view.View 类 开始 扩展 。 


在 其 最 简单 的 形式 ， 编 写 构 造 画 数 对 应 的 所 有 基 类 的 构造 画 数 。 例 如 ， 如 果 要 扩展 
TextView 创建 DateView 以 下 三 个 构造 ， 创 建 DateView 类 : 


public class DateView extends TextView { 
public DateView(Context context) { 
super(context); 
//--- Additional custom code -- 


} 


public DateView(Context context, AttributeSet attrs) { 
super(context, attrs); 
//--- Additional custom code -- 


j 


public DateView(Context context, AttributeSet attrs, int defSty- 
super(context, attrs, defStyle); 
//--- Additional custom code -- 





4 C cest persia 


TextView 的 子 类 DateView 已 经 创建 ， 所 以 可 以 获得 有 关 TextView 的 所 有 属性 、 方 
法 和 事件 ， 能 够 使 用 不 需要 任何 进一步 的 实现 。 这 里 将 实现 额外 的 自 定义 功能 在 自 
己 编写 的 代码 ， 如 下 面 的 例子 解释 。 

如 果 要 求 执 行 自 定义 绘图 /定制 部 件 的 尺寸 ， 那 么 需要 重 写 onMeasure(int 


widthMeasureSpec, int heightMeasureSpec) 和 onDraw(Canvas canvas) 方法 。 如 
RATS ARBRE BABAK, 382.3t7 88 XRBFHGx E75 ATE BRE SCR FF. 


布局 管理 报告 部 件 的 宽度 和 高 度 需要 协调 onMeasure() 方法 ， 需 要 调用 
setMeasuredDimension(int width, int height)， 这 种 方法 来 报告 尺寸 大 小 。 


可 以 执行 自 定 义 绘图 里 Canvas 的 onDraw(Canvas canvas) 方法 ， 其 中 
android.graphis.Canvas 其 对 应 Swing 是 非常 相似 的 ，drawRect(), drawLine(), 
drawString(), drawBitmap() 等 ， 可 以 用 它 来 绘制 组 件 。 


完成 了 一 个 自 定义 组 件 的 实现 之 后 ， 通 过 扩大 现 有 的 部 件 ， 将 能 够 实例 化 这 些 自 定 
义 组 件 在 应 用 程序 开发 两 种 方式 : 


Activity 类 实例 内 使 用 代码 


这 是 非常 相似 的 方式 实例 化 自 定义 组 件 实例 的 方式 ， 在 活动 类 的 内 置 部 件 。 例 如 ， 
可 以 使 用 下 面 的 代码 实例 上 面 定 义 的 自 定义 组 件 : 


QOverride 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


DateView dateView - new DateView(this); 
setContentView(dateView); 


查看 这 个 例子 来 了 解 如 何 使 用 代码 里 面 活动 实例 化 一 个 基本 的 Android 自 定义 组 


o 


使 用 布局 XML 文件 实例 


使 用 传统 布局 XML 文 件 实例 的 内 置 部 件 ， 相 同 的 概念 适用 于 自 定义 部 件 ， 因 此 将 能 
够 实例 化 自 定 义 组 件 布局 XML 文件 ， 解 释 如 下 。 在 com.yiibai.dateviewdemo 包 ， 已 
经 把 所 有 的 代码 相关 DateView 和 DateView 类 ， 已 经 把 自 定义 组 件 的 完整 的 逻辑 的 
Java 类 名 。 


<RelativeLayout xmlns:android-"http://schemas.android.com/apk/res/: 
xmlns:tools-"http://schemas.android.com/tools" 
android: layout_width="match_parent" 
android: layout_height="match_parent" 
android: paddingBottom="@dimen/activity_vertical_margin" 
android: paddingLeft="@dimen/activity_horizontal_margin" 
android: paddingRight="@dimen/activity_horizontal_margin" 
android: paddingTop="@dimen/activity_vertical_margin" 
tools:context=".MainActivity" > 


«com.yiibai.dateviewdemo.DateView 
android: layout_width="match_parent" 
android: layout_height="wrap_content" 
android: textColor="#f fF" 
android: textSize="40sp" 
android: background="#000" 

/> 
</RelativeLayout> 


ae 
要 注意 ， 在 这 里 我 们 使 用 的 所 有 TextView 属性 以 及 自 定义 组 件 没有 任何 变化 。 X 
似 的 方式 能 够 使 用 所 有 的 事件 、 方 法 ， 以 及 DateView 组 件 。 


通过 这 个 例子 ， 了 解 如 何 使 用 布局 XML 文件 实例 化 一 个 基本 的 Android 自 定义 组 
件 。 


使 用 自 定义 属性 的 自 定 义 组 件 


我 们 已 经 看 到 可 以 如 何 扩展 功能 的 内 党 部 件 ， 但 上 面 给 BR a feedes 扩展 组 
件 ， 可 以 利用 它 的 父 类 的 所 有 默认 属性 。 但 考虑 到 一 种 情 》 pose Lu 
己 的 属性 。 下 面 是 一 外 简单 的 程序 创建 和 便 用 Anvdroid 的 自 定 久 组 件 的 新 属性 
里 介绍 三 个 属性 ， 并 使 用 它们 ， 如 下 所 示 : 





«com.yiibai.dateviewdemo.DateView 
android:layout widthz"match parent" 
android:layout height-"wrap content" 
android: textColor="#ffF" 
android: textSize="40sp" 
custom:delimiter="-" 
custom: fancyText="true" 


第 1 


Nr 
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第 一 步 ， 使 用 自 定义 的 属性 在 res/values/ 目录 下 创建 新 XML 文件 中 定义 attrs.xml。 
看 看 一 个 例子 文件 attrs.xml : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<declare-styleable name="DateView"> 
<attr name="delimiter" format="string"/> 
<attr name="fancyText" format="boolean"/> 
</declare-styleable> 
</resources> 


这 里 name=value 就 是 要 使 用 的 布局 XML 文件 中 并 作为 属性 ，format=type 属性 的 


类 型 。 
第 2 步 


第 二 个 步骤 和 将 是 从 布局 XML 文件 中 读 取 这 些 属性 ， 并 将 其 设置 为 组 件 。 这 个 逮 辑 将 
获得 通过 属性 集 的 构造 函数 ， 因 为 这 是 包含 XML 属 性 。 要 读 取 XML 中 的 值 ， 首 先 需 
要 从 AttributeSet 创 建 一 个 TypedArray， 然 后 用 它 来 读 取 和 设置 值 ， 如 下 面 的 示例 代 
码 所 示 : 


TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.D: 


final int N - a.getIndexCount(); 
for (int i = 0; i < N; ++i) 
{ 
int attr = a.getIndex(i); 
switch (attr) 


case R.styleable.DateView_delimiter: 
String delimiter = a.getString(attr); 
//...do something with delimiter... 
break; 
case R.styleable.DateView_fancyText: 
boolean fancyText = a.getBoolean(attr, false); 
//...do something with fancyText... 
break; 


} 
a.recycle(); 
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3 步 
最 后 ， 可 以 使 用 布局 XML 文件 中 定义 的 属性 如 下 : 


<RelativeLayout xmlns:android-"http://schemas.android.com/apk/res/: 
xmlns:tools-"http://schemas.android.com/tools" 
xmlns:custom-"http://schemas.android.com/apk/res/com. yiibai.da! 
android: layout_width="match_parent" 
android:layout height-"match parent" 
android:paddingBottom-"Qdimen/activity vertical margin" 
android:paddingLeft-"Qdimen/activity horizontal margin" 
android:paddingRight-"Qdimen/activity horizontal margin" 
android:paddingTop-"Qdimen/activity vertical margin" 
tools:context=".MainActivity" > 


«com.yiibai.dateviewdemo.DateView 
android: layout_width="match_parent" 
android: layout_height="wrap_content" 
android: textColor="#f ff" 

android: textSize="40sp" 
custom:delimiter="-" 

custom: fancyText="true" 

/> 


</RelativeLayout> 
m EMEN 
重要 的 部 分 是 


xmlns:custom-"http://schemas.android.com/apk/res/com.yiibai.dateviewdemo", 
需要 注意 的 是 http://schemas.android.com/apk/res/ 将 保持 原样 ， 但 最 后 一 部 分 需要 
设置 包 名 ， 也 可 以 使 用 任何 xmlns : 在 这 个 例子 中 ， 使 用 的 是 custom， 但 可 以 使 用 
任何 喜欢 的 名 字 。 


看 看 这 个 例子 ， 以 了 解 如 何 创 建 自 定义 属性 Android 自 定义 组 件 的 简单 步骤 。 





Android 拖 放 - Android 开 发 教程 

Android 拖 / 放 框架 人 允许 用 户 将 数据 从 一 个 View 到 另 一 个 视图 在 当前 布局 中 使 用 图 形 
化 的 拖 放 动作 。 该 框架 包括 以 下 三 个 重要 组 成 部 分 ， 支 持 拖 放 功能 : 

。 拖 动 事件 类 

e 拖 动 监听 器 

e 辅助 方法 和 类 


拖 放 过 程 
基本 上 有 四 个 步骤 ， 在 拖 放 过 程 或 状态 : 


e 开始 : 此 事件 发 生 时 开始 拖 动 布局 中 的 一 个 项 目 ， 应 用 类 的 tartDrag() 方 法 来 告 
诉 系统 启动 拖 动 。startDrag() 方 法 的 参数 提供 被 拖 动 的 数据 ， 这 些 是 数据 的 元 
数据 和 一 个 回调 用 于 绘制 的 拖 动 阴 影 。 


该 系统 首先 通过 回调 应 用 程序 ， 以 获得 一 个 拖 阴 影 的 响应 。 然 后 显示 在 设备 上 
的 拖 影 。 


接 下 来 ， 系 统 会 发 送 拖 电 事 件 动作 类 型 ACTION_DRAG _STARTED 在 当前 布局 
中 的 所 有 视图 对 象 拖 动 事件 监听 器 注册 。 


若 要 继续 接收 拖 动 事件 ， 其 中 包括 一 个 可 能 的 放 事件 ， 一 个 拖 事件 侦 听 器 必须 
返回 true， 如 果 拖 动 事件 侦 听 器 返回 false， 那 么 它 不 会 收 到 拖 动 事件 当前 的 操 
作 ， 直 到 系统 发 送 一 个 动作 类 型 的 拖 电 事件 ACTION_DRAG_ENDED。 


继续 : 用 户 可 以 继续 拖 动 。 系 统 发 送 ACTION_DRAG_ENTERED 动 作 ， 其 次 
注册 拖 动 事件 侦 听 器 的 视图 中 拖 动 点 进入 ACTION_DRAG LOCATION z/ f£, 

响应 该 事件 监听 器 可 以 选择 改变 其 对 象 的 外 观 或 可 以 凸显 其 观点 反应 。 用 户 移 
动 拖 动 视图 的 边框 阴影 外 拖 电 事件 侦 听 器 接收 ACTION_DRAG_EXITED 动 作 。 


拖 动 : 用 户 释放 拖 动 的 项 目 视图 的 边框 内 。 该 系统 发 送 对 象 的 侦 听 器 拖 动 事件 
使 用 动作 类 型 ACTION_DROP。 


结果 : 操作 类 型 ACTION_DROP 之 后 ， 系 统 发 出 一 个 操作 类 型 
ACTION_DRAG_ENDED 表 示 拖 动 操作 结束 的 拖 动 事件 。 


DragEvent 类 


dragEvent 代 表 一 个 事件 ， 就 会 由 系统 送出 拖 放 操 作 过 程 中 在 不 同 的 时 间 。 这 个 类 
提供 了 一 些 常 量 和 重要 的 方法 在 使 用 拖 / 放 过 程 。 


[ala 


ES 


以 下 是 所 有 常量 作为 部 分 dragEvent 类 整数 。 


S.N. 常量 说 明 
1 ACTION DRAG STARTED 拖 放 操作 的 开始 的 信号 
2 ACTION DRAG ENTERED 一 种 视图 拖 动 点 已 进入 视图 的 边框 的 信号 
3 ACTION_DRAG_LOCATION 发 送 到 ACTION_DRAG_ENTERED 后 的 
视图 ， 如 果 拖 影 依然 是 查看 对 象 的 边框 内 
4 ACTION DRAG EXITED 信号 的 用 户 移动 拖 动 阴影 视图 的 边框 之 外 
5 ACTION DROP 信号 到 View 用 户 发 布 了 拖 影 ， 而 阻力 点 就 是 视图 的 边 
HEA 
6 ACTION DRAG ENDED 视图 拖 放 操作 已 经 结束 信号 
方法 
以 下 是 作为 部 分 的 dragEvent 类 提供 一 些 重要 的 和 最 常用 的 方法 。 
S.N. 常量 说 明 
1 int getAction() 检查 此 事件 的 动作 值 
2 ClipData getClipData() 返回 对 象 到 系统 调用 ClipData() 发 送 作为 到 
startDrag 一 部 分 部 分 
3 ClipDescription getClipDescription() 返回 包含 在 ClipData 的 
ClipDescription 对 象 
4 boolean getResult() 返回 拖 放 操作 的 结果 的 指示 
5 float getX() 获取 阻力 的 X 坐 标点 
6 float getY() 获取 阻力 的 Y 坐 标点 
7 String toString() 返回 DragEvent 对 象 的 字符 串 表 示 
监听 拖 放 事件 


如 果 想 要 的 任何 布局 内 视图 响应 拖 动 事件 ， 那 么 视图 要 么 实现 
View.OnDragListener 或 者 设置 onDragEvent(DragEvent) 回调 方法 。 当 系统 调用 
的 方法 或 监听 器 ， 它 传递 给 上 述 dragEvent 对 象 。 可 以 查看 对 象 的 监听 器 和 一 个 回 
调 方法 。 如 果 发 生 这 种 情况 ， 系 统 首先 调用 监听 器 ， 然 后 定义 回调 监听 器 返回 


true。 


组 合 onDragEvent(DragEvent) 方 法 和 View.OnDragListener， 类 似 于 
onTouchEvent() 和 View.OnTouchListener 使 用 在 旧版 本 Android 触摸 事件 的 组 
A 


O o 


开始 拖 动 事件 


开始 创建 ClipData 和 移动 数据 ClipData.ltem。 作 为 ClipDataobject 的 一 部 分 提供 的 
元 数据 被 存储 在 ClipDescription 内 ClipData 对 象 。 对 于 拖 放 操作 ， 并 不 代表 数据 移 
动 ， 可 能 想 使 用 空 (null) 而 不 是 实际 的 对 象 。 


下 一 步 ， 可 以 扩展 View.DragShadowBuilder 创建 一 个 拖 动 视图 ， 或 者 使 用 
View.DragShadowBuilder(View) 创建 一 个 默认 的 大 小 相同 的 View 参 数 传递 给 它 的 
凶 影 ， 触 摸 拖 动 阴影 点 集中 在 拖 影 。 


示例 


下 面 的 例子 显示 了 一 个 简单 的 拖 放 示例 中 使 用 View.setOnLongClickListener() 事件 
侦 听 器 和 View.OnDragEventListener().Eq 2X. 


步 REN 
Un 
m 描述 
使 用 Android Studio 创 建 Android 应 用 程序 ， 并 将 它 命名 为 : 
1 DragNDropDemo。 在 创建 这 个 项 目 ， 确 保 目 标 SDK 和 编译 在 Android 
SDK 的 最 新 版 本 或 使 用 更 高 级 别 的 AP|。 


修改 src/MainActivity.java 文件 ， 并 添加 定义 事件 侦 听 器 的 代码 ， 以 及 一 
个 回调 方法 ， 在 这 个 例子 中 使 用 Logo 图 像 


复制 图 片 logo.png 到 res/drawable-* 文件 来 。 可 以 使 用 的 情况 下 ， 要 为 他 
们 提供 了 不 同 的 设备 有 不 同 的 分 辩 率 的 图 像 


4 ”修改 布局 文件 _res/layout/activity_main.xml | 定义 logo 图 片 的 默认 视 
5 ”运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 修改 主 活动 文件 src/com.yiibai.dragndropdemo/MainActivity.java 。 这 
个 文件 可 以 包括 每 个 生命 周期 基本 方法 。 


package com.yiibai.dragndropdemo; 


import android.os.Bundle; 

import android.app.Activity; 

import android.content.ClipData; 

import android.content.ClipDescription; 
import android.util.Log; 

import android.view.DragEvent; 

import android.view.View; 

import android.view.View.DragShadowBuilder; 
import android.view.View.OnDragListener; 
import android.widget.*; 


public class MainActivity extends Activity{ 


ImageView ima; 
private static final String IMAGEVIEW TAG - "Android Logo"; 
String msg; 


private android.widget.RelativeLayout.LayoutParams layoutParams, 


QOverride 

public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


ima - (ImageView)findViewById(R.id.iv logo); 
// Sets the tag 
ima.setTag(IMAGEVIEW TAG); 


ima.setOnLongClickListener(new View.OnLongClickListener() ( 
QOverride 
public boolean onLongClick(View v) { 
ClipData.Item item = new ClipData.Item((CharSequence)v 


String[] mimeTypes = í(ClipDescription.MIMETYPE TEXT PL/ 
ClipData dragData - new ClipData(v.getTag().toString(), 
mimeTypes, item); 


// Instantiates the drag shadow builder. 
View.DragShadowBuilder myShadow = new DragShadowBuilde! 


// Starts the drag 
v.startDrag(dragData, // the data to be dragged 
myShadow, // the drag shadow builder 
null, // no need to use local data 
0 // flags (not currently used, set to 0) 
); 
return true; 
} 
3); 


// Create and set the drag event listener for the View 
ima.setOnDragListener( new OnDragListener(){ 
QOverride 
public boolean onDrag(View v, DragEvent event)( 
RelativeLayout.LayoutParams layoutParams = (RelativeLayout 
switch(event.getAction()) 
{ 
case DragEvent.ACTION DRAG STARTED: 
layoutParams = (Relativelayout.LayoutParams) 
v.getLayoutParams(); 
Log.d(msg, "Action is DragEvent.ACTION DRAG STARTED' 
// Do nothing 
break; 
case DragEvent.ACTION DRAG ENTERED: 
Log.d(msg, "Action is DragEvent.ACTION DRAG ENTERED' 
int x cord - (int) event.getX(); 


int y cord = (int) event.getY(); 
break; 

case DragEvent.ACTION DRAG EXITED 
Log.d(msg, "Action is DragEvent.ACTION DRAG EXITED". 
X cord - (int) event.getX(); 
y cord - (int) event.getY(); 
layoutParams.leftMargin - x cord; 
layoutParams.topMargin - y cord; 
v.setLayoutParams(layoutParams); 
break; 

case DragEvent.ACTION DRAG LOCATION 
Log.d(msg, "Action is DragEvent.ACTION DRAG LOCATIO! 


X cord = (int) event.getX( ); 
y cord = (int) event.getY(); 
break; 


case DragEvent.ACTION DRAG ENDED 
Log.d(msg, "Action is DragEvent.ACTION DRAG ENDED"), 
// Do nothing 
break; 
case DragEvent.ACTION DROP: 
Log.d(msg, "ACTION DROP event"); 
// Do nothing 
break; 
default: break; 
} 


return true; 





Fl res/layout/activity main.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android-"http://schemas.android.com/apk/res/: 
android: id="@+id/container" 
android: layout_width="fill_ parent" 
android: layout_height="fill_ parent" 
android:orientation="vertical" > 


<ImageView 
android: id="@+id/iv_logo" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: src="@drawable/logo" 
android: contentDescription="@string/drag_drop" /> 


</RelativeLayout> 


«| m 











下 面 文件 res/values/strings.xml 的 内 容 中 定义 两 个 新 的 常量 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">DragNDropDemo</string> 

<string name="action_settings">Settings</string> 

«string name-"hello world">Hello world!</string> 

«string name="drag_drop">Click on the image to drag and drop</: 


</resources> 


«| "s 








以 下 是 AndroidManifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.guidemo" 
android: versionCode="1" 
android: versionName="1.0" > 


«uses-sdk 
android:minSsdkVersionz"16" 
android: targetSdkVersion="17" /> 


<application 

android: allowBackup="true" 
android:icon-"Qdrawable/ic launcher" 
android:label-"Qstring/app name" 
android: theme="@style/AppTheme" > 
<activity 

android: name="com. yiibai.guidemo.MainActivity" 

android: label="@string/app_name" > 

<intent-filter> 

<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 


</manifest> 
[JE 


我 们 尝试 运行 DragNDropDemo 应 用 程序 。AVD 安 装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 
一 切 设 置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 








现在 长 时 间 点 击 显 示 Android 的 标志 ， 会 看 到 标志 图 像 经 过 1 秒 长 的 点 击 它 ， 开 始 拖 
动 图 像 的 时 候 移 动 了 一 点 。 可 以 拖 动 它 在 屏幕 上 ， 并 把 它 放 在 一 个 新 的 位 置 。 


4 * 8:19 
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以 下 代码 下 
载 : http://pan.baidu.com/s/1eQIQljw 


Android 通 知 - Android 开 发 教程 
MU a 类 提供 了 一 个 方便 的 方式 来 显示 用 户 的 警告 信息 ， 但 这 些 警 告 不 是 
持久 性 的 ， 这 意 > 闪烁 在 屏幕 上 几 秒 钟 后 就 消失 了 。 


对 于 特别 重要 的 要 提供 给 用 户 的 消息 ， 需 要 有 更 持久 性 的 方法 。 Anotification 是 一 
种 消息 可 以 显示 在 设 各 的 顶部 的 通知 栏 或 状态 栏 中 。 


On: 5554:VirtualAVD 





要 看 到 通知 的 细节 ， 选 择 图 标 显 示 通 知 抽 层 里 有 详细 的 有 关 通 知 。 模 拟 器 虚拟 设 各 
工作 ， 按 一 下 向 下 拖 动 状态 栏 将 它 展开 ， 将 显示 详细 信息 如 下 。 这 将 是 64 sp 高 的 
普通 视图 。 


ceived new message 





上 述 扩 大 的 形式 可 以 放 到 一 个 大 的 视图 ， 有 关 通 知 的 更 多 细节 。 可 以 添加 最 多 六 
的 通知 。 下 面 的 截图 显示 了 这 样 的 通知 。 


AO 5554:VirtualAVD 
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» Big Tite Details: 
| is first line 
| ond line 


is third line 


s 4th line 


sis 5th line 





创建 和 发 送 通知 
使 用 简单 的 方法 来 创建 一 个 通知 。 按 照 以 下 步骤 在 应 用 程序 创建 一 个 通知 : 


第 1 步 - 通知 生成 器 


作为 第 一 步 创 建 一 个 通知 构造 器 ， 使 用 NotificationCompat.Builder.build()。 使 用 通 
知 Builder 来 设置 属性 ， 如 各 种 通知 其 小 型 和 大 型 图 标 ， 标 题 ， 优 先 级 等 。 


NotificationCompat.Builder mBuilder = new NotificationCompat .Builde 


‘| _ — Bgm] 


第 2 步 - 设置 通知 属性 
在 创建 Builder 对 象 之 后 ， 可 以 按 要 求 使 用 生成 器 创建 通知 对 象 。 这 是 强制 性 的 ， 以 


至 少 下 列 设置 : 
。 一 个 小 图 标 ， 由 setSmalllcon() 设置 
e 一 个 标题 ， 由 setContentTitle() 设置 


e. 详细 内 容 由 setContentText() 设置 








mBuilder.setSmallIcon(R.drawable.notification icon); 
mBuilder.setContentTitle("Notification Alert, Click Me!"); 
mBuilder.setContentText("Hi, This is Android Notification Detail!" 


El mM ee 


通知 有 很 多 可 选 的 属性 ， 可 以 设置 。 要 更 多 地 了 解 它们 ， 请 参考 
NotificationCompat.Builder 文档 。 


第 3 步 - 动作 附加 


这 是 一 个 可 选 的 部 分 ， 并 要 求 如 果 要 附加 一 个 动作 的 通知 。 动 作 可 以 让 用 户 直 接 从 
通知 到 应 用 程序 中 的 活动 ， 在 那里 它们 可 以 在 一 个 或 多 个 事件 ， 或 做 进一步 的 工 
作 。 


动作 定义 通过 Pendinglntent 在 应 用 程序 中 的 活动 意图 。 要 关联 Pendinglntent 手势 
请 调用 适当 NotificationCompat.Builder 方法 。 例 如 ， 如 果 想 开始 活动 ， 当 用 户 点 击 
通知 文本 通知 抽 导 Pendinglntent 调用 setContentlntent()。 


Pendinglntent 对 象 表 示 应 用 程序 的 执行 一 个 动作 ， 在 以 后 的 时 间 里 查看 应 用 程序 是 


So ee eee 确保 向 后 导航 的 活动 在 应 用 程序 的 
主屏 o 





Intent resultIntent - new Intent(this, ResultActivity.class); 
TaskStackBuilder stackBuilder - TaskStackBuilder.create(this); 
stackBuilder.addParentStack(ResultActivity.class); 


// Adds the Intent that starts the Activity to the top of the stacl 
stackBuilder.addNextiIntent(resultIntent); 
PendingIntent resultPendingIntent - 
stackBuilder.getPendingIntent( 
0, 
PendingIntent.FLAG UPDATE CURRENT 


): 


mBuilder.setContentIntent(resultPendingIntent); 


Eee 
第 4 步 - 发 出 通知 


最 后 ， 调 用 NotificationManager.notify() 发 送 通知 ， 通 知 对 象 传 递 到 系统 。 通 知之 
前 ， 确 保 调用 NotificationCompat.Builder.build() 方 法 生成 器 对 象 。 这 种 方法 结合 了 
所 有 的 选择 ， 设 置 并 返回 一 个 新 的 Notificationobject。 


NotificationManager mNotificationManager = 
(NotificationManager) getSystemService(Context.NOTIFICATION SEI 


// notificationID allows you to update the notification later on. 
mNotificationManager.notify(notificationID, mBuilder.build()); 


ur CCS C cc cL. HE cce] 





NotificationCompat.Builder 3: 


NotificationCompat.Builder 类 可 以 更 容易 控制 标志 ， 以 及 帮助 构建 典型 通知 布局 。 
以 下 是 NotificationCompat.Builder 类 的 一 些 重要 的 和 最 常用 的 方法 的 一 部 分 。 


S.N. 


15 


16 


示例 


& tH 
Notification build() 结合 所 有 已 设置 的 选项 ， 并 返回 一 个 新 的 
Notification 对 象 


NotificationCompat.Builder setAutoCancel (boolean autoCancel) 
设置 此 标志 将 使 它 以 便当 用 户 点 击 它 在 面板 中 的 通知 被 自动 取消 


NotificationCompat.Builder setContent (RemoteViews views) 提供 
定制 RemoteViews 使 用 来 代替 标准 之 一 


NotificationCompat. Builder setContentlnfo (CharSequence info) 


设置 大 文本 的 通知 的 右 侧 


NotificationCompat.Builder setContentlntent (Pendinglntent 
intent) 提供 一 个 Pendinglntent 通 知 被 点 击 时 发 出 


NotificationCompat.Builder setContentText (CharSequence text) 


置 通知 的 文本 〈 第 二 行 ) ， 在 一 个 标准 的 通知 


NotificationCompat.Builder setContentTitle (CharSequence title) 


置 通知 的 文本 〈 第 一 行 ) ， 在 一 个 标准 的 通知 


NotificationCompat.Builder setDefaults (int defaults) 设置 将 要 使 用 
的 默认 通知 选项 


NotificationCompat.Builder setLargelcon (Bitmap icon) 设置 显示 在 
自动 收报 机 和 通知 大 图 标 


NotificationCompat. Builder setNumber (int number) 在 通知 的 右 侧 
设置 大 的 数字 


NotificationCompat.Builder setOngoing (boolean ongoing) 设置 这 
是 否 是 一 个 持续 的 通知 


NotificationCompat.Builder setSmalllcon (int icon) 设置 小 图 标 在 通 


知 使 用 布局 


NotificationCompat.Builder setStyle (NotificationCompat.Style 
style) 在 构建 时 应 用 添加 丰富 的 通知 祥 式 


NotificationCompat.Builder setTicker (CharSequence tickerText) 
设置 在 第 一 个 通知 到 达 时 显示 在 状态 栏 中 的 文本 
NotificationCompat.Builder setVibrate (long[] pattern) 设置 振动 模 
式 的 使 用 


NotificationCompat.Builder setWhen (long when) 设置 该 事件 发 生 
的 时 间 。 在 面板 的 通知 是 由 这 个 时 间 进 行 排序 


以 下 示例 显示 Android 的 通知 功能 ，NotificationCompat.Builder 类 已 在 Android4.1 


中 引入 。 


TR 


7 
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4 FA Android Studio 创 建 一 个 Android 应 用 程序 ， 并 将 它 命 名 为 : 
NotificationDemounder。 在 创建 这 个 项 目 时 确保 目标 SDK 和 编译 在 
Android SDK 的 最 新 版 本 或 更 高 级 别 的 APl。 


修改 src/MainActivityjava 文件 ， 并 添加 定义 三 种 方法 startNotification()， 
cancelNotification0) 和 updateNotification()， 以 涵盖 与 Android 的 通知 的 最 
大 功能 的 代码 。 


创建 一 个 新 的 src/NotificationView.jjava， 这 将 被 用 于 显示 新 的 布局 作为 新 
的 活动 将 被 启动 的 一 部 分 ， 当 用 户 将 点 击 通知 


复制 图 片 woman.png 在 RES/ drawable-* 文 件 夹 ， 这 个 图 片 将 被 用 作 通 知 
图 标 。 可 以 使 用 的 情况 下 ， 要 为 他 们 提供 了 不 同 的 设备 有 不 同 的 分 辩 率 的 
图 片 


修改 布局 XML 文件 res/layout/activity main.xml 添加 三 个 按钮 的 线性 布局 


创建 一 个 新 的 布局 XML 文件 res/layout/notification.xml, 这 将 被 用 来 作为 
布局 文件 为 新 的 活动 ， 将 所 动 时 用 户 将 点 击 任何 通知 


修改 res/values/strings.xml 中 定义 所 需 的 恒定 值 


运行 该 应 用 程序 时 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 


以 下 是 修改 主要 活动 文件 src/com.yiibai.notificationdemo/MainActivity.java 的 内 


DA 


SS 
合 。 


这 个 文件 可 以 包括 每 个 生命 周期 基本 方法 。 


package com.example.notificationdemo; 


import android.os.Bundle; 

import android.app.Activity; 

import android.app.NotificationManager; 
import android.app.PendingIntent; 
import android.app.TaskStackBuilder; 
import android.content.Context; 

import android.content.Intent; 

import android.support.v4.app.NotificationCompat; 
import android.util.Log; 

import android.view.View; 

import android.widget.Button; 


public class MainActivity extends Activity { 


private NotificationManager mNotificationManager; 
private int notificationID - 100; 
private int numMessages = 0; 


protected void onCreate(Bundle savedInstanceState) { 


j 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


Button startBtn - (Button) findViewById(R.id.start); 
startBtn.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
displayNotification(); 
j 


3); 


Button cancelBtn - (Button) findViewById(R.id.cancel); 
cancelBtn.setOnClickListener(new View.OnClickListener() ( 
public void onClick(View view) { 
cancelNotification(); 
j 


+); 


Button updateBtn = (Button) findViewById(R.id.update) ; 
updateBtn.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
updateNotification(); 
j 


+); 


protected void displayNotification() { 


Log.i("Start", "notification"); 


/* Invoking the default notification service */ 
NotificationCompat.Builder  mBuilder = 
new NotificationCompat.Builder(this); 


mBuilder.setContentTitle("New Message"); 
mBuilder.setContentText("You've received new message."); 
mBuilder.setTicker("New Message Alert!"); 
mBuilder.setSmallIcon(R.drawable.woman) ; 


/* Increase notification number every time a new notificatior 
mBuilder.setNumber(++numMessages ); 


/* Creates an explicit intent for an Activity in your app */ 
Intent resultIntent = new Intent(this, NotificationView.clas: 


TaskStackBuilder stackBuilder = TaskStackBuilder.create(this: 
stackBuilder.addParentStack(NotificationView.class); 


/* Adds the Intent that starts the Activity to the top of the 
stackBuilder.addNextIntent(resultlIntent); 
PendingIntent resultPendingIntent - 
stackBuilder.getPendingIntent( 
0, 
PendingIntent.FLAG UPDATE CURRENT 


); 


mBuilder.setContentIntent(resultPendingIntent); 


mNotificationManager - 
(NotificationManager) getSystemService(Context.NOTIFICATION : 


/* notificationID allows you to update the notification late! 
mNotificationManager.notify(notificationID, mBuilder.build(): 


j 


protected void cancelNotification() (1 
Log.i("Cancel", "notification"); 
mNotificationManager.cancel(notificationID); 


j 


protected void updateNotification() { 
Log.i("Update", "notification"); 


/* Invoking the default notification service */ 
NotificationCompat.Builder  mBuilder - 
new NotificationCompat.Builder(this); 


mBuilder.setContentTitle("Updated Message"); 
mBuilder.setContentText("You've got updated message."); 
mBuilder.setTicker("Updated Message Alert!"); 
mBuilder.setSmallIcon(R.drawable.woman) ; 


/* Increase notification number every time a new notification 
mBuilder.setNumber(++numMessages ); 


/* Creates an explicit intent for an Activity in your app */ 
Intent resultIntent = new Intent(this, NotificationView.clas: 


TaskStackBuilder stackBuilder = TaskStackBuilder.create(this: 
stackBuilder.addParentStack(NotificationView.class); 


/* Adds the Intent that starts the Activity to the top of the 
stackBuilder.addNextIntent(resultlIntent); 
PendingIntent resultPendingIntent - 
stackBuilder.getPendingIntent( 
0, 
PendingIntent.FLAG UPDATE CURRENT 


); 
mBuilder.setContentIntent(resultPendingIntent); 


mNotificationManager - 
(NotificationManager) getSystemService(Context.NOTIFICATION : 


/* Update the existing notification using same notification : 
mNotificationManager.notify(notificationID, mBuilder.build(): 


«| = 








以 下 是 修改 的 主 活动 文件 的 内 容 
src/com.yiibai.notificationdemo/NotificationView.java. 


package com.example.notificationdemo; 


import android.os.Bundle; 
import android.app.Activity; 


public class NotificationView extends Activity{ 
@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); 
setContentView(R.layout.notification); 


下 面 文件 res/layout/activity main.xml 的 内 容 如 下 : 


«LinearLayout xmlns:android="http://schemas.android.com/apk/res/ant 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 


«Button android:id="@+id/start" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/start_note"/> 


«Button android:id="@+id/cancel" 
android: layout_width="fill_ parent" 
android: layout_height="wrap_content" 
android: text="@string/cancel_note" /> 


<Button android:id="@+id/update" 

android: layout_width="fill_ parent" 

android: layout_height="wrap_content" 

android: text="@string/update_note" /> 
</LinearLayout> 


1 


下 面 是 res/layout/notification.xml 文件 的 内 容 : 





<?xml version="1.0" encoding="utf-8"?> 
«LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: orientation="vertical" 
android: layout_width="fill_ parent" 
android:layout height-"fill parent" > 
«TextView 
android:layout widthz"fill parent" 
android: layout_height="400dp" 
android: text="Hi, Your Detailed notification view goes here....' 
</LinearLayout> 








下 面 文件 res/values/strings.xml 的 内 容 中 定义 两 个 新 的 常量 : 


<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">NotificationDemo</string> 
<string name="action_settings">Settings</string> 
«string name="hello world">Hello world!</string> 
«string name="Start_note">Start Notification</string> 
<string name="cancel_note">Cancel Notification</string> 
<string name="update_note">Update Notification</string> 


</resources> 


Fz AndroidManifest.xml 文件 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.notificationdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


«uses-sdk 
android:minsdkVersionz"17" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.notificationdemo.MainActivity' 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 

</intent-filter> 

</activity> 

<activity android:name=".NotificationView" 
android: label="Details of notification" 
android: parentActivityName=".MainActivity"> 

<meta-data 

android: name="android. support .PARENT_ACTIVITY" 

android: value=".MainActivity"/> 

</activity> 

</application> 


</manifest> 





我 们 尝试 运行 NotificationDemo 应 用 程序 。AVD 安 装 的 应 用 程序 ， 并 和 启动 它 ， 如 果 
一 切 设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





Start Notification 


Cancel Notification 


Update Notification 


Jiioai2or 


现在 单 击 “Start Notification” 通 知 按钮 ， 会 看 到 在 上 面 的 一 条 消息 "New Message 
Alert! 将 短暂 显示 后 ， 将 有 下 面 的 屏幕 左上 角 有 一 个 小 图 标 。 





WP New Message Alert! 


Start Notification 
Cancel Notification 


Update Notification 


giioaLeon 


现在 ， 让 我 们 展开 视图 ， 长 按 小 图 标 ， 一 秒 钟 后 它 会 显示 日 期 信息 ， 这 是 时 间 的 时 
候 ， 应 该 释放 鼠标 拖 动 状态 栏 的 情况 下 。 会 看 到 状态 栏 将 扩大 ， 会 得 到 以 下 画面 : 
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New Message. 





yiibai.com 


现在 ， 让 我 们 党 试 在 图 像 上 点 击 图 标 ， 这 将 启动 新 的 活动 ， 已 设置 使 用 的 意图 ， 将 
有 以 下 屏幕 : 





Hi, Your Detailed notification view goes here 


yijsaj, eo 


接 下 来 ， 可 以 点 击 “Detail of notification"”， 闻 带 回 到 主屏 幕 ， 可 以 尝试 使 用 更 新 通知 
按钮 ， 将 更 新 现 有 的 通知 和 数量 将 增加 1， 但 如 果 发 送 通知 ， 新 的 通知 ID 会 继续 增 
加 在 堆栈 中 ， 会 看 到 他 们 在 屏幕 上 单独 列 示 。 


查看 大 图 通知 


下 面 的 代码 片断 演示 了 如 何 改变 的 通知 ， 上 面 代 码 中 创建 使 用 收 件 箱 大 视图 样式 。 
要 更 新 displayNotification() 方法 来 显示 这 个 功能 : 


protected void displayNotification() { 
Log.i("Start", "notification"); 


/* Invoking the default notification service */ 
NotificationCompat.Builder  mBuilder = 
new NotificationCompat.Builder(this); 


mBuilder.setContentTitle("New Message"); 
mBuilder.setContentText("You've received new message."); 


mBuilder.setTicker("New Message Alert!"); 
mBuilder.setSmallIcon(R.drawable.woman) ; 


/* Increase notification number every time a new notificatior 
mBuilder.setNumber (++numMessages ); 


/* Add Big View Specific Configuration */ 
NotificationCompat.InboxStyle inboxStyle = 
new NotificationCompat.InboxStyle(); 


String[] events = new String[6]; 


events[0] = new String("This is first line...."); 
events[1] - new String("This is second line..."); 
events[2] - new String("This is third line..."); 
events[3] - new String("This is 4th line..."); 
events[4] = new String("This is 5th line..."); 
events[5] = new String("This is 6th line..."); 


// Sets a title for the Inbox style big view 
inboxStyle.setBigContentTitle("Big Title Details:"); 
// Moves events into the big view 

for (int i=0; i < events.length; i++) ( 


inboxStyle.addLine(events[i]); 


} 
mBuilder.setStyle(inboxStyle); 


/* Creates an explicit intent for an Activity in your app */ 
Intent resultIntent = new Intent(this, NotificationView.clas: 


TaskStackBuilder stackBuilder = TaskStackBuilder.create(this: 
stackBuilder.addParentStack(NotificationView.class); 


/* Adds the Intent that starts the Activity to the top of the 
stackBuilder.addNextIntent(resultIntent); 
PendingIntent resultPendingIntent - 
stackBuilder.getPendingIntent( 
0, 
PendingIntent.FLAG UPDATE CURRENT 


); 
mBuilder.setContentIntent(resultPendingIntent); 


mNotificationManager - 
(NotificationManager) getSystemService(Context.NOTIFICATION : 


/* notificationID allows you to update the notification late! 
mNotificationManager.notify(notificationID, mBuilder.build(): 


‘ a 








现在 ， 如 果 党 斌 运行 应 用 程序 ， 然 后 会 发 现下 面 的 结果 视图 的 扩展 形式 : 


Big Title Details: 
This is first line 
rt s second line 


This ts rd line 
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Android 基 于 位 置 服务 - Android 开 发 教程 


Android 的 位 置 API， 很 容易 让 创建 位 置 感知 的 应 用 程序 ， 而 不 需要 把 重点 放 在 相关 
定位 技术 细节 。 这 在 谷歌 服务 的 帮助 下 有 利于 应 用 程序 添加 位 置 感知 ， 自 动 定 位 跟 
踪 ， 地 理 和 活动 识别 成 为 可 能 。 


本 教程 介绍 了 如 何 使 用 位 置 服务 在 应 用 程序 来 获取 当前 的 位 置 ， 得 到 周期 性 位 置 更 
新 ， 查 找 地 址 等 


Location 对 象 


Location 对 象 代 表 一 个 地 理 位 置 可 包括 纬度 ， 经 度 ， 时 间 惟 和 其 它 信息 ， 如 重力 ， 
高 度 和 速度 。 有 以 下 重要 的 方法 在 使 用 Location 对 象 位 置 的 具体 信息 : 


S.N. 方法 和 说 明 


float distanceTo(Location dest) 返回 在 这 个 位 置 ， 并 在 给 定 的 位 置 之 
HARES (单位 : X) 


2 float getAccuracy() 得 到 这 个 位 置 的 估计 精度 ， 以 米 为 单位 
3 double getAltitude() (如 果 可 用 ) 获取 的 高 度 ， 如 : 海拔 (单位 : 
米 ) 


4 float getBearing() 获取 轴承 ， 以 度 为 单位 

5 double getLatitude() 获得 纬度 ， 单 位 为 度 

6 double getLongitude() 得 到 经 度 ， 单 位 为 度 

7 float getSpeed() 获取 速度 (如 果 可 用 ) ， 在 地 上 以 米 / 秒 

8 boolean hasAccuracy() 如 果 此 位 置 有 一 个 精确 度 

9 boolean hasAltitude() True - 如 果 此 位 置 有 一 个 高 度 

10 boolean hasBearing() True 如 果 该 位 置 有 一 个 支撑 

11 boolean hasSpeed() True 如 果 这 个 位 置 有 一 个 速度 

12 voidreset() 清除 单元 内 容 

13 void setAccuracy(float accuracy) 设置 此 位 置 的 估计 精度 CK) 
14 void setAltitude(double altitude) 设置 海拔 高 度 CK) 

15 void setBearing(float bearing) 设置 支承 ， 以 度 为 单位 

16 void setLatitude(double latitude) 设置 的 纬度 ， 单 位 为 度 

17 void setLongitude(double longitude) 设置 的 经 度 ， 单 位 为 度 
18 void setSpeed(float speed) 设置 速度 ， 在 地 上 以 米 / 秒 

19 String toString() 返回 包含 此 对 象 的 简洁 ， 可 读 的 描述 字符 串 信 息 


当前 位 置 


要 获得 目前 的 位 置 ， 需 要 创建 一 个 位 置 的 LocationClient 对 象 ， 将 它 连接 到 位 置 服 
务 使 用 connect() 方 法 ， 然 后 调用 其 getLastLocation() 方法 。 此 方法 返回 最 近 的 位 
置 Location 对 象 的 形式 : 其 中 包含 纬度 和 经 度 坐 标 和 其 他 信息 ， 如 上 面 所 述 。 要 在 
活动 中 有 基于 位 置 的 功能 ， 将 需要 实现 两 个 接口 : 


e GooglePlayServicesClient.ConnectionCallbacks 
e GooglePlayServicesClient.OnConnectionFailedListener 


这 些 接口 提供 了 以 下 重要 的 ， 需 要 在 活动 类 实现 回调 方法 : 


S.N. 回调 方法 及 说 明 


abstract void onConnected(Bundle connectionHint) 这 个 回调 方法 
1 被 调用 时 ， 位 置 服务 是 成 功 连接 到 客户 端的 位 置 。 将 使 用 connect() 方 法 
来 连接 到 客户 端的 位 置 


2 abstract void onDisconnected() 当 客 户 端 断 开 这 个 回调 方法 被 调用 。 
将 使 用 disconnect() 方 法 从 位 置 客户 端 断 开 连接 
3 abstract void onConnectionFailed(ConnectionResult result) 这 个 


回调 方法 被 调用 时 ， 有 客户 端 连接 到 服务 的 错误 
应 该 创 在 建 客 户 活 动 类 onCreate() 方 法 中 调用 猎取 位 置 ， 然 后 将 其 连接 在 
onStart()， 让 位 置 服务 维持 目前 的 位 置 ， 而 活动 是 完全 可 见 。 断 开 客 户 端 


onStop() 方 法 ， 这 样 应 用 程序 是 不 可 见 的 ， 位 置 服务 不 是 维持 在 目前 的 位 置 。 
这 在 很 大 程度 上 有 助 于 节省 电池 电量 。 


获取 更 新 位 置 


如 果 愿 意 的 位 置 更 新 ， 那 么 除了 上 面 提 到 的 接口 ， 需 要 实现 LocationListener 接 
口 ， 该 接口 提供 了 以 下 回调 方法 ， 需 要 在 活动 类 实现 : 


S.N. 回调 方法 说 明 


1 abstract void onLocationChanged(Location location) 此 回调 方法 用 
于 从 LocationClient 接 收 通知 时 的 位 置 发 生 了 变化 


位 置 服务 质量 


LocationRequest 对 象 的 位 置 从 LocationClient 更 新 服务 质量 (QoS) ，setter 方 法 可 
以 用 它 来 处理 QoS。 


S.N. 方法 & 描述 

1 setExpirationDuration(long millis) 设置 此 请 求 的 时 间 ， 以 毫秒 为 单位 

2 SMEXOetionTimetong millis) E & ziixi&iscKii Bs], fue 

3 setFastestinterval(long millis) 明确 设置 最 快 的 时 间 间 隅 位 置 更 新 ， 以 
室 秒 为 单位 

4 e ong millis) 设置 为 主动 位 置 更 新 ， 以 毫秒 为 单位 所 需 的 时 


5 setNumUpdates(int numUpdates) 设置 的 位 置 更 新 次 数 
6 setPriority(int priority) 设置 请 求 的 优先 级 


例如 ， 如 果 应 用 需要 较 准 确 位 置 ， 它 应 该 创建 一 个 位 置 请 求 setPriority(int) 设置 
PRIORITY_HIGH_ACCURACY 和 setlnterval(long) 为 5 秒 。 还 可 以 使 用 更 大 的 间隔 
和 /或 其 他 优先 如 PRIORITY_LOW_POWER 要 求 “ 城 市 ” 的 级 别 精度 或 

PRIORITY BALANCED POWER ACCURACY 为 “ 块 "级 别 的 精度 。 


活动 应 该 考虑 删除 在 所 有 位 置 请 求 进入 后 台 时 (例如 onPause()) ， 或 者 至 少 
交换 请 求 到 一 个 更 大 的 间隔 和 降低 质量 以 节省 电力 消耗 。 


显示 位 置地 址 


Location 对 象 可 以 使 用 Geocoder.getFromLocation() 方法 来 获得 一 个 地 址 ， 对 于 一 
个 给 定 的 纬度 和 经 度 。 这 种 方法 是 同步 的 ， 可 能 要 花 很 长 的 时 间 来 完成 其 工作 ， 所 
以 应 该 调用 AsyncTask 类 的 dolnBackground() Aix. 


AsyncTask 必 须要 使 用 的 子 类 和 子 类 会 履 盖 dolnBackground (Params....) 方法 中 
执行 任务 UI 线 程 上 的 后 台 计 算 完 成 后 ， 当 onPostExecute(Result) 方法 被 调用 显示 
结果 。 还 有 一 个 更 重要 的 方法 在 AyncTask execute(Params... params)， 此 方法 使 
用 指定 的 参数 执行 任务 。 


检查 下 面 的 例子 中 ， 我 们 如 何 使 用 AynchTask 在 任何 Android 应 用 程序 完成 工作 的 
主要 任务 ， 而 不 会 干扰 后 台 。 


示例 
下 面 的 示例 演示 如 何在 实际 使 用 位 置 服务 在 应 用 程序 来 获取 当前 位 置 、 等 效 地 址 等 


等 。 这 个 例子 中 ， 需 要 实际 配备 最 新 的 Android OS 移动 设备 ， 否 则 仿真 器 可 能 无 
法 正常 工作 。 


安 委 谷歌 播放 服务 SDK 


在 继续 之 前 有 位 置 在 Android 应 用 程序 的 支持 ，NEET 设 置 谷歌 播放 服务 SDK 使 用 以 
下 简单 的 步骤 : 


描述 


启动 SDK 管 理 器 在 Eclipse (使 用 ADT) ， 选 择 Window > Android SDK 
Manager 在 Windows 中 ， 双 击 SDK Manager.exe 请 通过 在 Android SDK 
目录 的 根 目 录 在 Mac 或 Linux 打 开 一 个 终端 并 导航 到 工具 /目录 下 在 Android 
SDK 目 录 下 ， 然 后 执行 Android SDK 


搜索 Google Play services 从 给 定 的 软件 包 列 表 服 务 选项 下 的 Extra ， 如 
2 ” 果 没 有 安装 它 ， 那 么 进行 安装 。 在 谷歌 Play 业 务 SDK 是 在 保存 在 Android 
SDK 环 境 <android-sqk>/extras/google/google_play_services/ 


复制 库 项 目 在 <android- 
sdk>/extras/google/google_play_services/libproject/google-play- 
services_lib/ 到 维护 Android 应 用 项 目的 位 置 。 如 果 使 用 的 是 Eclipse， 导 入 


3 库 项 目 到 工作 区 。 点 击 File > Import, 选择 Android > Existing Android 
Code 到 工作 区 , 并 浏览 到 <android- 
sdk»/extras/google/google play services/libproject/, 库 项 目 将 其 导入 
创建 Android 应 用 程序 
步 2 
jak 
" 描述 


使 用 Eclipse IDE 创 建 Android 应 用 程序 ， 并 将 其 命名 为 : LBSDemo， 在 创 
1 ” 建 这 个 项 目 时 请 确保 目标 SDK 编译 在 Android SDK 的 最 新 版 本 或 使 用 更 高 
级 别 的 API 


2 il Google Play 服务 库 中 的 项 目 按照 以 下 给 出 简单 的 步 又 
修改 src/MainActivity.java 文件 ， 并 添加 所 需 的 代码 如 下 所 示 采 取 获 取 当 


3 前 位 置 和 它 的 等 效 转交 地 址 
修改 布局 XML 文 件 res/layout/activity_main.xml 添加 所 有 GUI 组 件 ， 其 中 包 


括 三 个 按钮 和 两 个 文本 视图 来 显示 位 置 /地 址 

5 修改 res/alues/strings.xml 定 义 所 需 的 常量 值 

6 ”修改 AndroidManifest.xml 如 下 所 示 

7 ， 和 运行 该 应 用 程序 启动 Android 模 拟 器 和 验证 应 用 程序 所 做 的 修改 结果 
让 我 们 在 项 目 中 添加 引用 谷歌 Play 服务 。 右 键 单 击 该 项 目 ， 并 选择 Build Path > 
Configure Build Path > Android >， 然 后 单 击 “Add "按钮 ， 将 显示 要 添加 的 谷歌 Play 


service_liboption， 只 要 双击 就 可 以 了 ， 这 将 增加 所 需 的 库 的 引用 ， 将 有 窗口 如 下 
所 示 : 


,8.0,0 Properties for LBSDemo 





Android Dt e v 

b Resource 

Android Project Build Target 

Android Lint Preferences 

Builders Target Name Vendor Platform API Leve 

Java Build Path Android 4.2.2 Android Open Source Project 4.2.2 17 
> java Code Style IM Android 4.3 Android Open Source Project 4.3 18 
P java Compiler Google APIs Coogle Inc 4.3 18 


b Java Editor 
Javadoc Location 
Project References 
Refactoring History 
Run/Debug Settings 
Task Tags Library 
b Validation 
Is Library 





Reference Project 


wv ulus d. f Applications/adt-bu... google-play-services lib 





Restore Defaults Apply 
? Cancel AAA 
SDE CII 


以 下 是 内 容 的 修改 主 活动 文件 src/com.yiibai.lbsdemo/MainActivity.java 


package com.example.lbsdemo; 


import java.io.IOException; 
import java.util.List; 
import java.util.Locale; 


import com.google.android.gms.common.ConnectionResult; 
import com.google.android.gms.common.GooglePlayServicesClient; 
import com.google.android.gms.location.LocationClient; 


import android.content.Context; 

import android.location.Address; 

import android.location.Geocoder; 

import android.location.Location; 

import android.os.AsyncTask; 

import android.os.Bundle; 

import android.support.v4.app.FragmentActivity; 


import android.util.Log; 

import android.view.View; 
import android.widget.Button; 
import android.widget.TextView; 
import android.widget.Toast; 


public class MainActivity extends FragmentActivity implements 
GooglePlayServicesClient.ConnectionCallbacks, 
GooglePlayServicesClient.OnConnectionFailedListener 


( 


LocationClient mLocationClient; 


private TextView addressLabel; 
private TextView locationLabel; 
private Button getLocationBtn; 
private Button disconnectBtn; 
private Button connectBtn; 


@Override 
protected void onCreate(Bundle savedInstanceState) { 


j 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


locationLabel - (TextView) findViewById(R.id.locationLabel); 
addressLabel - (TextView) findViewById(R.id.addressLabel); 
getLocationBtn - (Button) findViewById(R.id.getLocation); 


getLocationBtn.setOnClickListener(new View.OnClickListener() 
public void onClick(View view) { 
displayCurrentLocation(); 
j 


3); 
disconnectBtn - (Button) findViewById(R.id.disconnect); 


disconnectBtn.setOnClickListener(new View.OnClickListener() . 
public void onClick(View view) { 
mLocationClient.disconnect(); 
locationLabel.setText("Got disconnected...."); 


} 


}); 
connectBtn = (Button) findViewById(R.id.connect); 


connectBtn.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
mLocationClient.connect(); 
locationLabel.setText("Got connected...."); 


} 
3); 


// Create the LocationRequest object 
mLocationClient - new LocationClient(this, this, this); 


QOverride 
protected void onStart() { 


} 


super .onStart(); 

// Connect the client. 
mLocationClient.connect(); 
locationLabel.setText("Got connected...."); 


@Override 
protected void onStop() { 


} 


// Disconnect the client. 
mLocationClient.disconnect(); 

super.onStop(); 

locationLabel.setText("Got disconnected...."); 


QOverride 
public void onConnected(Bundle dataBundle) { 


j 


// Display the connection status 
Toast.makeText(this, "Connected", Toast.LENGTH SHORT).show(), 


QOverride 
public void onDisconnected() { 


} 


// Display the connection status 
Toast.makeText(this, "Disconnected. Please re-connect.", 
Toast.LENGTH SHORT) .show( ) ; 


QOverride 
public void onConnectionFailed(ConnectionResult connectionResull 


// Display the error code on failure 
Toast.makeText(this, "Connection Failure 
connectionResult.getErrorCode(), 

Toast .LENGTH_SHORT) .show( ) ; 


n 十 


public void displayCurrentLocation() { 


} 
yd 


* 


$7 


// Get the current location's latitude & longitude 

Location currentLocation = mLocationClient.getLastLocation(), 
String msg = "Current Location: " + 
Double.toString(currentLocation.getLatitude()) + "," + 
Double.toString(currentLocation.getLongitude()); 


// Display the current location in the UI 
locationLabel.setText(msg); 


// To display the current address in the UI 


(new GetAddressTask(this)).execute(currentLocation); 


Following is a subclass of AsyncTask which has been used to ( 
address corresponding to the given latitude & longitude. 


private class GetAddressTask extends AsyncTask«Location, Void, : 


Context mContext; 

public GetAddressTask(Context context) ( 
super(); 
mContext = context; 


j 


VAS 
* when the task finishes, onPostExecute() displays the addre 
27 
@Override 
protected void onPostExecute(String address) { 
// Display the current address in the UI 
addressLabel.setText(address); 
} 
@Override 
protected String doInBackground(Location... params) { 
Geocoder geocoder = 
new Geocoder(mContext, Locale.getDefault()); 
// Get the current location from the input parameter list 


Location loc = params[0]; 
// Create a list to contain the result address 
List<Address> addresses = null; 
try { 
addresses = geocoder.getFromLocation(loc.getLatitude(), 
loc.getLongitude(), 1); 
} catch (IOException e1) { 
Log.e("LocationSampleActivity", 
"IO Exception in getFromLocation()"); 
e1.printStackTrace(); 
return ("IO Exception trying to get address"); 
) catch (IllegalArgumentException e2) { 
// Error message to post in the log 
String errorString = "Illegal arguments " + 
Double.toString(loc.getLatitude()) + 
W i n 十 
Double.toString(loc.getLongitude()) + 
" passed to address service"; 
Log.e("LocationSampleActivity", errorString); 
e2.printStackTrace(); 
return errorString; 


J 
// If the reverse geocode returned an address 
if (addresses !- null && addresses.size() > 0) ( 


// Get the first address 
Address address - addresses.get(0); 
ee 
* Format the first line of address (if available), 
* city, and country name. 
Sy 
String addressText = String.format( 
"%s, 96s, 96s", 
// If there's a street address, add it 
address.getMaxAddressLineIndex() > 0 ? 
address.getAddressLine(0) : "", 
// Locality is usually a city 
address.getLocality(), 
// The country of the address 
address.getCountryName()); 
// Return the text 
return addressText; 

) else { 
return "No address found"; 

} 


}// AsyncTask class 


se 





Following will be the content of res/layout/activity_main.xml file: 


<LinearLayo 
android: 
android: 
android: 


«Button 

android: 
android: 
android: 


«Button 

android: 
android: 
android: 


«Button 

android: 
android: 
android: 


«TextVi 
android: 
android: 
android: 


ut xmlns:android-"http://schemas.android.com/apk/res/ant 
layout width-z"fill parent" 

layout height-"fill parent" 

orientation-"vertical" » 


android:id-z"Q-«-id/getLocation" 
layout width-z"fill parent" 
layout height-"wrap content" 
text="@string/get_location"/> 


android: id="@+id/disconnect" 
layout width-z"fill parent" 

layout height-z"wrap content" 
text-"Qstring/disconnect"/» 


android:id-z"Q-*id/connect" 
layout width-z"fill parent" 
layout height-z"wrap content" 
text="@string/connect"/> 


ew 
id="@+id/locationLabel" 
layout_width="wrap_content" 
layout_height="wrap_content"/> 


<TextView 


android: 
android: 
android: 


id="@+id/addressLabel" 
layout_width="wrap_content" 
layout_height="wrap_content"/> 


</LinearLayout> 


El =s s 





下 面 文件 res/values/strings.xml 内 容 中 定义 两 个 新 的 常量 : 


«?xml versi 
«resources» 


«string 
«string 
«string 
«string 
«string 
«string 
«/resources 


onz"1.0" encoding="utf -8"?> 


name="app_name">LBSDemo</string> 
name="action_settings">Settings</string> 
name="hello_world">Hello world!</string> 
name="get_location">Get Location</string> 
name="disconnect">Disconnect Service</string> 
name-"connect"»Connect Service</string> 

> 


以 下 是 AndroidManifest.xml 文件 中 默认 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.1lbsdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses -sdk 
android: minSdkVersion="8" 
android: targetSdkVersion="17" /> 
«uses-permission android:name-"android.permission.ACCESS COARSE. 


«application 

android:allowBackup="true" 
android:icon-"Qdrawable/ic launcher" 
android:label-"Qstring/app name" 
android: theme="@style/AppTheme" > 
<activity 

android: name="com. yiibai.lbsdemo.MainActivity" 

android: label="@string/app_name" > 

<intent-filter> 

<action android:name="android.intent.action.MAIN" , 


«category android: name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 


</manifest> 
E ———————— ee 


我 们 党 试 运行 LBSDemo 应 用 程序 。 Eclipse AVD 安 装 的 应 用 程序 ， 并 雇 动 它 ， 如 果 
一 切 设置 和 点 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





6.0.0 Android Device Chooser 
Select a device with min API level 8. 





(*) Choose a running Android device 


Serial Number 





AVD Name Target ‘Debug State  ] 
= htc-htc_one-FA379W901923|N/A 


Online 





Launch a new Android Virtual Device 


Use same device for future launches Cancel (rette —À 
Hy EJH 


选择 移动 设备 作为 一 个 选项 ， 然 后 检查 移动 设备 ， 这 将 显示 以 下 画面 : 


ike p iw $ 会 ull Al 4:17 ev 


i! LBSDemo 





Get Location 
Disconnect Service 


Connect Service 





Got connected.... 


现在 看 到 的 位 置 选择 位 置 “按钮 ， 将 显示 位 


at o av i 会 wil @@ 12:07 am 


iSi LBSDemo 





Get Location 


Disconnect Service 


Connect Service 


Current Location: 
23.585585585585587,58.391325117370606 
As Sultan Qaboos St, null, Oman 


/liou eos 


可 以 尝试 断 开 位 置 ， 客 户 端 使 用 服务 ， 然 后 断 开 连 接 使 用 连接 服务 按钮 ， 还 可 以 修 
改 位 置 更 新 ， 如 上 所 述 ， 可 查阅 Android 官 方 文档 。 


Android 发 送 电子 邮件 - Android 开 发 教程 
在 前 面 已 经 学 会 了 Android 的 意图 (Intent)， 这 是 落实 意图 ， 即 一 个 对 象 。 来 自 一 个 
部 件 的 消息 传递 到 另 一 个 组 件 使 用 - 在 应 用 程序 或 应 用 程序 之 外 。 


因此 这 里 不 需要 从 头 开 始 ， 因 为 它们 已 经 可 以 像 Gmail 和 K9mail 开发 电子 邮件 客 
户 端 。 但 需要 从 Android 应 用 程序 发 送 的 电子 邮件 ， 编 写 一 个 活动 Activity， 使 用 

Android 设 备 发 送 电子 邮件 需要 启动 电子 邮件 客户 端 并 发 送 电 子 邮 件 。 为 了 这 个 目 

的 ， 活 动 将 伴随 着 相应 的 数据 负载 一 个 ACTION_SEND 发 送 到 Android 意图 解析 

器 。 指 定 选 择 器 提供 适当 的 接口 供用 户 选择 如 何 发 送 电 子 邮件 数据 。 


以 下 部 分 说 明 Intent 对 象 发 送 电子 邮件 。 


Intent 对 象 - 动作 发 送 电子 邮件 


使 用 ACTION_SEND 的 动作 启动 Android 设备 上 安装 一 个 电子 邮件 客户 端 。 以 下 是 
简单 的 语法 创建 一 个 Intent 用 ACTION_SEND 动 作 


Intent emailIntent = new Intent(Intent.ACTION SEND); 


Intent x12& - 效 据 / 发 送 电子 邮件 的 类 型 


要 发 送 电 子 邮 件 ， 需 要 指定 mailto : URI 使 用 setData() 方法 并 且 数 据 类 型 是 
text/plain 使 用 settype() 方 法 如 下 : 


emailIntent.setData(Uri.parse("mailto:")); 
emailIntent.setType("text/plain"); 


Intent 对 象 - 附加 发 送 电 子 邮 件 


Android 已 经 内 置 支持 TO, SUBJECT, CC, TEXT 等 域 ， 可 以 在 附加 Intent 之 前 发 送 
到 目标 的 电子 邮件 客户 端的 Intent。 可 以 使 用 额外 的 字段 后 电子 邮件 : 


S.N. 额外 数据 & 描述 
1 EXTRA_BCC String[] 持 有 应 密 件 复制 电子 邮件 地 址 
2 EXTRA CC String[] 持 有 复制 电子 邮件 地 址 
3 EXTRA_EMAIL String[] 持 有 应 递送 到 电子 邮件 地 址 


EXTRA_HTML_TEXT 与 该 意图 相关 联 的 常数 字符 串 ， 使 用 
ACTION SEND 替代 EXTRA TEXT 为 HTML 格式 的 文本 


5 EXTRA SUBJECT 常量 字符 串 持 有 一 条 消息 的 所 需 主 题 行 
EXTRA TEXT 与 该 意图 相关 联 的 CharSequence 常 量 ， 具 有 


6 ACTION, SEND 用 来 提供 文字 数据 被 发 送 
7 EXTRA TITLE 一 个 CharSequence 对 话 框 的 标题 ， 提 供给 用 户 在 


ACTION_CHOOSER 使 用 时 


下 面 是 一 个 例子 展示 如 何 分 配额 外 的 数据 到 intent 


emailIntent.putExtra(Intent.EXTRA EMAIL , new String[]{"recipient¢ 
emailIntent.putExtra(Intent.EXTRA SUBJECT, "subject of email"); 
emailIntent.putExtra(Intent.EXTRA TEXT , "body of email"); 


4 一 


示例 


下 面 的 示例 演示 如 何在 实际 使 用 Intent 对 象 启动 电子 邮件 客户 端 发 送 电子 邮件 给 定 
的 收 件 人 。 要 测试 这 个 例子 ， 需 要 实际 配备 了 最 新 的 Android OS 的 移动 设备 ， 否 则 
仿真 器 可 能 无 法 正常 工作 。 其 次 ， 需 要 在 您 的 设备 上 安装 一 个 电子 邮件 客户 端 ， 如 
Gmail 或 K9mail 





步 


又 fix 


iE 


使 用 Android Studio 创 建 Android 应 用 程序 ， 并 将 它 命名 为 
1 SendEmailDemounde。 创 建 这 个 项 目 ， 确 保 目标 SDK 并 编译 在 Android 
SDK 为 最 新 版 本 以 及 使 用 更 高 级 别 的 API 


2 ”修改 src/MainActivity.java 文件 ， 并 添加 所 需 的 代码 ， 以 发 送 电 子 邮 件 


3 修改 所 需 的 布局 XML 文 件 res/1layout/activity_main.xml 添加 GUI 组 件 。 这 里 
添加 一 个 简单 的 按钮 ， 启动 电子 邮件 客户 端 


4 ”修改 res/values/strings.xml 定 义 所 需 的 常量 值 
5 ”修改 AndroidManifest.xml 如 下 所 示 
6 ”运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 修改 的 主 活动 文件 的 内 容 src/com.yiibai.sendemaildemo/MainActivity.java. 


package com.example.sendemaildemo; 


import android.net.Uri; 

import android.os.Bundle; 
import android.app.Activity; 
import android.content.Intent; 
import android.util.Log; 
import android.view.Menu; 
import android.view.View; 
import android.widget.Button; 
import android.widget.Toast; 


public class MainActivity extends Activity { 


@Override 

protected void onCreate(Bundle savedInstanceState) { 
super .onCreate(savedInstanceState) ; 
setContentView(R.layout.activity main); 


Button startBtn - (Button) findViewById(R.id.sendEmail); 
startBtn.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
sendEmail(); 
j 
3); 


protected void sendEmail() { 
Log.i("Send email", ""); 


String[] TO = {"amrood.admin@gmail.com"}; 

String[] CC = {"mcmohd@gmail.com"}; 

Intent emaillntent - new Intent(Intent.ACTION SEND); 
emailIntent.setData(Uri.parse("mailto:")); 
emailIntent.setType("text/plain"); 


emailIntent.putExtra(Intent.EXTRA EMAIL, TO); 
emailIntent.putExtra(Intent.EXTRA CC, CC); 
emailIntent.putExtra(Intent.EXTRA SUBJECT, "Your subject"); 
emailIntent.putExtra(Intent.EXTRA TEXT, "Email message goes | 


try { 
startActivity(Intent.createChooser(emailIntent, "Send mai: 
finish(); 
Log.i("Finished sending email...", ""); 


} catch (android.content.ActivityNotFoundException ex) { 
Toast.makeText(MainActivity.this, 
"There is no email client installed.", Toast.LENGTH SHORT: 


QOverride 

public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 


j 


«| = 








下 面 是 文件 res/layout/activity_main.xml HAR : 


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/anc 
android: layout_width="fill_ parent" 
android: layout_height="fill_parent" 
android:orientation="vertical" > 


«Button android: id="@t+id/sendEmail" 

android: layout_width="fill_ parent" 

android: layout_height="wrap_content" 

android: text="@string/compose_email"/> 
</LinearLayout> 


ES O 
下 面 文件 res/values/strings.xml 的 内 容 中 定义 两 个 新 的 常量 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">SendEmailDemo</string> 
«string name-"hello world">Hello world!</string> 
<string name="action_settings">Settings</string> 
«string name="compose_email">Compose Email</string> 


</resources> 


以 下 是 文件 AndroidManifest.xml 默认 的 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.sendemaildemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android:icon-"Qdrawable/ic launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.sendemaildemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 
</manifest> 


4 PEE 


我 们 尝试 运行 SendEmailDemo 应 用 程序 。Eclipse AVD 安 装 的 应 用 程序 ， 并 启动 
它 ， 如 果 一 切 设置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





[8.0.0 Android Device Chooser 


Select a device with min API level 8. | 





Target Debug State — 
8 htc-htc one-FA379W901923|N/A Online 





Launch a new Android Virtual Device 


AVD Name Target Name Piatforn 


tualAVD 


Use same device for future launches Cancel GO 
us ATut eot 


选择 移动 设备 作为 一 个 选项 ， 然 后 检查 移动 设备 ， 这 将 显示 以 下 男 面 : 


Compose Emall 


现在 使 用 Compose Email 按钮 ， 列 出 了 所 有 已 安装 的 电子 邮件 客户 端 。 从 列表 中 ， 
可 以 选择 其 中 的 电子 邮件 客户 端 发 送 电子 邮件 。 要 使 用 Gmail 客户 端 发 送 电子 邮 
件 ， 将 所 有 提供 的 默认 值 的 字段 ， 如 下 图 所 示 。 在 这 里 ，From : 将 默认 的 电子 邮件 
ID， 已 经 为 Android 设 各 注册 。 





选择 email" 后 ， 如 果 没 有 配置 帐号 信 





=F Account setup 


You can set up your account in just a 
few steps. 





息 ， 则 提示 配置 帐号 信息 : 


可 以 修改 默认 字段 ， 最 后 使 用 “send email "按钮 〈 标 有 红色 矩形 ) 提 到 的 收 件 人 发 
送 电子 邮件 。 代码 下 载 地 下 : http:/pan.baidu.com/s/1qW2Xohm 


Android 发 送 短信 /SMS - Android 开 发 教程 
有 以 下 两 种 方式 来 使 用 Android 设备 发 送 短信 : 

e 使 用 SmsManager 发 送 短信 

e 使 用 内 时 Intent 发 送 短信 
使 用 SmsManager 发 送 短信 


SmsManager 管 理 ， 例 如 在 给 定 的 移动 设备 将 数据 发 送 到 的 SMS 操 作 。 可 以 创建 此 
对 象 调用 静态 方法 SmsManager.getDefault() 如 下 : 


SmsManager smsManager = SmsManager.getDefault(); 


创建 SmsManager 对 象 之 后 ， 可 以 使 用 sendDataMessage() 方法 指定 的 手机 号 码 
发 送 短信 ， 如 下 : 


smsManager.sendTextMessage("phoneNo", null, "SMS text", null, null. 





除了 上 述 方法 外 ，SmsManager 类 可 供 选 择 的 其 他 几 个 重要 的 函数 。 下 面 列 出 了 这 
些 方法 : 
S.N. 方法 和 说 明 


ArrayList<String> divideMessage(String text) 这 个 方法 把 一 个 消息 
文本 分 成 几 个 片段 ， 最 大 不 能 大 于 短信 大 小 


static SmsManager getDefault() 这 个 方法 被 用 来 获取 SmsManager 


1 


?的 默认 实例 
void sendDataMessage(String destinationAddress, String 

3 scAddress, short destinationPort, byte[] data, Pendinglntent 
sentintent, PendingIntent deliveryIntent) 这 个 方法 被 用 来 发 送 一 个 基 
于 数据 SMS 到 特定 的 应 用 程序 的 端口 
void sendMultipartTextMessage(String destinationAddress, String 

4 scAddress, ArrayList<String> parts, ArrayList<Pendinglntent> 
sentintents, ArrayList<PendingIntent> deliveryIntents) 发 送 一 个 基 
于 多 部 分 文本 短信 
void sendTextMessage(String destinationAddress, String 

5 scAddress, String text, Pendinglntent sentintent, Pendinglntent 


deliveryIntent) 发 送 基于 文本 的 短信 


示例 


下 面 的 示例 演示 如 何在 实际 中 使 用 SmsManager 对 象 给 定 的 手机 号 码 发 送 短信 。 


要 党 试 这 个 例子 中 ， 需 要 实际 配 各 了 最 新 Android OS 的 移动 设备 ， 否 则 优 真 
器 可 能 无 法 正常 工作 。 


步 


述 
" 描述 


使 用 Android Studio 创建 Android 应 用 程序 ， 并 将 它 命名 为 
1 SendSMSDemounder。 在 创建 这 个 项 目 ， 确 保 目标 SDK 编译 在 Android 
SDK 的 最 新 版 本 或 使 用 更 高 级 别 的 API 


2 ”修改 src/MainActivityjava 文件 ， 并 添加 所 需 的 代码 以 发 送 短信 


修改 所 需 的 布局 XML 文件 res/layout/activity main.xml 添加 任何 GUI 组 

3 ， 件 。 加 入 了 一 个 简单 的 GUI 以 输入 手机 号 码 并 短信 发 送 ， 以 及 一 个 简单 的 
按钮 发 送 短信 。 

4 ”修改 res/values/strings.xml 定义 所 需 的 常量 值 

5 ”修改 AndroidManifest.xml 如 下 所 示 


6 ”运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 
以 下 是 修改 的 主 活动 文件 src/com.yiibai.sendsmsdemo/MainActivityjava 的 内 容 


package com.example.sendsmsdemo; 


import android.os.Bundle; 

import android.app.Activity; 

import android.telephony.SmsManager; 
import android.util.Log; 

import android.view.Menu; 

import android.view.View; 

import android.widget.Button; 

import android.widget.EditText; 
import android.widget.Toast; 


public class MainActivity extends Activity { 


Button sendBtn; 
EditText txtphoneNo; 
EditText txtMessage; 


QOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


sendBtn - (Button) findViewById(R.id.btnSendSMS); 


txtphoneNo = (EditText) findViewById(R.id.editTextPhoneNo); 
txtMessage - (EditText) findViewById(R.id.editTextSMS); 


sendBtn.setOnClickListener(new View.OnClickListener() ( 


public void onClick(View view) { 
sendSMSMessage(); 
} 


}); 


protected void sendSMSMessage() { 
Log.i("Send SMS", ""); 


String phoneNo 
String message 


txtphoneNo.getText().toString(); 
txtMessage.getText().toString(); 


try { 
SmsManager smsManager = SmsManager .getDefault(); 


smsManager.sendTextMessage(phoneNo, null, message, null, 1 
Toast.makeText(getApplicationContext(), "SMS sent.", 
Toast.LENGTH LONG).show(); 
) catch (Exception e) { 
Toast.makeText(getApplicationContext(), 
"SMS faild, please try again.", 
Toast.LENGTH LONG).show(); 
e.printStackTrace(); 
} 
} 
QOverride 
public boolean onCreateOptionsMenu(Menu menu) ( 
// Inflate the menu; this adds items to the action bar if it 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 





"iz res/layout/activity main.xml 文件 的 内 容 : 


<LinearLayo 


ut xmlns:android-"http://schemas.android.com/apk/res/ant 


android:layout widthz"fill parent" 
android:layout height-"fill parent" 


android:ori 


entation="vertical" > 


<TextView 


android: 
android: 
android: 
android: 


<EditTex 
android: 
android: 
android: 
android: 


id="@+id/textViewPhoneNo" 
layout_width="wrap_content" 
layout_height="wrap_content" 
text-"Qstring/phone label" /> 


t 

id="@+id/editTextPhoneNo" 
layout width-z"fill parent" 
layout height-z"wrap content" 
inputType="phone"/> 


<TextView 


android: 
android: 
android: 
android: 


<EditTex 
android: 
android: 
android: 
android: 


<Button 

android: 
android: 
android: 


id="@+id/textViewMessage" 

layout_width="wrap_content" 
layout_height="wrap_content" 
text="@string/sms_label" /> 


t 

id="@+id/editTextSMSs" 

layout width-z"fill parent" 
layout height-"wrap content" 
inputType="textMultiLine"/> 


android: id="@+id/btnSendSMSs" 
layout width-z"fill parent" 
layout height-z"wrap content" 
text-"Qstring/send sms label"/» 


«/LinearLayout» 


De 一 





下 面 文件 res/values/strings.xml 的 内 容 中 定义 两 个 新 的 常量 : 


«?xml versi 
«resources» 


«string 
«string 
«string 
«string 
«string 
«string 


«/resources 


onz"1.0" encoding="utf -8"?> 


name="app_name">SendSMSDemo</string> 
name="action_settings">Settings</string> 
name="hello_world">Hello world!</string> 
name="phone_label">Enter Phone Number :</string> 
name="sms_label">Enter SMS Message:</string> 
name-"send sms label"»Send SMS</string> 


2 


以 下 是 AndroidManifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.sendsmsdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 
<uses-permission android:name="android.permission.SEND_SMS" /> 


<application 
android: allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.sendsmsdemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 


</manifest> 
E 诡 


我 们 尝试 运行 SendSMSDemo 应 用 程序 。Eclipse 的 AVD 上 安装 的 应 用 程序 ， 并 局 
动 它 ， 如 果 一 切 的 设置 和 应 用 代码 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





8.0.0 Android Device Chooser 


Select a device with min API level 8. 





(*) Choose a running Android device 


Serial Number AVD Name. Target - ‘Debug State — | 





= htc-htc one-FA379W901923|N/A 2 Online 


Launch a new Android Virtual Device 


AVD Name Target Name Platform API Level CPU/ABI 


AVD 


Use same device for future launches Cancel (Oe 
Aut eot 


选择 移动 设备 作为 一 个 选项 ， 然 后 检查 移动 设备 ， 这 将 显示 以 下 男 面 : 





Enter Phone Number 
13880003800 
Enter SMS Mes 


this is a test msg by yiibai.com 


Send SMS 


现在 可 以 输入 手机 号 码 及 文本 消息 并 发 送 。 最 后 点 击 "Send SMS "按钮 发 送 短信 。 
请 确保 GSM 连 接 工 作 正常 ， 以 及 提供 正确 的 短信 收 件 人 。 


aoe 些 短 信用 喜 号 分 隔 ， 在 程序 中 把 它 解 析 为 一 个 数组 的 字符 串 ， 最 后 可 以 使 
一 个 循环 来 发 送 消息 给 所 有 给 定 的 手机 号 码 。 下 一 节 将 学 习 如 何 使 用 现 有 的 
ae 客户 端 发 送 短信 。 


使 用 内 置 Intent 发 送 短信 


发 送 短信 通过 调用 Android 内 读 短 信 功 能 ， 可 以 使 用 Android 的 Intent。 以 下 部 分 说 明 
使 用 Intent 对 象 发 送 短信 的 功能 。 


Intent 对 象 - 发 送 短信 动作 


使 用 ACTION_VIEW 动作 启动 Android 设备 上 安装 SMS 客户 端 。 以 下 是 简单 的 语 
法 来 创建 一 个 Intent 来 使 用 ACTION_VIEW 动作 


Intent smsIntent = new Intent(Intent.ACTION VIEW); 


Intentx12& - 数据 /发 送 短信 类 型 


要 发 送 的 短信 需要 使 用 SetData() 方 法 指定 smsto: 作为 URI 和 数据 类 型 将 使 用 
setType() 方法 如 下 vnd.android-dir/mms-sms : 


smsIntent.setData(Uri.parse("smsto:")); 
smsIntent.setType("vnd.android-dir/mms-sms"); 


Intent 对 象 - 附加 发 送 短信 
Android 已 经 经 内 置 支持 添加 电话 号 码 和 短信 发 送 短信 如 下 : 


smsIntent.putExtra("address" , new String("0123456789; 3393993300" 
smsIntent.putExtra("sms body" , "Test SMS to Angilla"); 


a] zm 


这 里 address 和 sms_body 是 大 小 写 敏 感 的 ， 应 以 小 字符 指定 。 可 以 指定 一 个 以 
上 的 号 码 在 单 串 ， 但 由 分 号 (;) 隔 开 。 





示例 


下 面 的 示例 演示 如 何在 实际 使 用 Intent 对 象 启 动 SMS 客 户 端 发 送 短信 给 定 的 收 件 


o 


要 尝试 这 个 例子 中 ， 需 要 实际 配 各 了 最 新 的 Android OS 的 移动 设备 ， 否 则 仿真 
强 可 能 无 法 正常 工作 、 


描述 


使 用 Android Studio 创 建 Android 应 用 程序 ， 并 将 它 命名 为 
1 SendSMSDemounder， 创 建 这 个 项 目 ， 确 保 目标 SDK 编 译 在 Android 
SDK 的 最 新 版 本 或 使 用 更 高 级 别 的 API。 


2 ”修改 src/MainActivityjava 文 件 ， 并 添加 所 需 的 代码 ， 以 发 送 短 信 。 


修改 所 需 的 布局 XML 文 件 res/layout/activity main.xml 添加 任何 GUI 组 
件 。 添 加 一 个 简单 的 按钮 用 来 触发 启动 SMS 客 户 端 。 


4 ”修改 res/values/strings.xml 定义 所 需 的 常量 值 
5 修改 AndroidManifest.xml 如 下 所 示 
6 ”运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 。 


以 下 是 修改 主 活动 文件 src/com.yiibai.sendsmsdemo/MainActivity.java HAS 


package com.example.sendsmsdemo; 


import android.net.Uri; 

import android.os.Bundle; 
import android.app.Activity; 
import android.content.Intent; 
import android.util.Log; 
import android.view.Menu; 
import android.view.View; 
import android.widget.Button; 
import android.widget.Toast; 


public class MainActivity extends Activity { 


QOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


Button startBtn - (Button) findViewById(R.id.sendSMS); 
startBtn.setOnClickListener(new View.OnClickListener() ( 
public void onClick(View view) { 
sendSMS( ); 


} 

3); 

} 

protected void sendSMS() ( 
Log.i("Send SMS", ""); 


Intent smsIntent - new Intent(Intent.ACTION VIEW); 
smsIntent.setData(Uri.parse("smsto:")); 


smsIntent.setType("vnd.android-dir/mms-sms"); 


smsIntent.putExtra("address" , new String ("0123456789")); 
smsIntent.putExtra("sms body" , "Test SMS to Angilla"); 
try { 
startActivity(smsIntent); 
finish): 
Log.i("Finished sending SMS...", ""); 
) catch (android.content.ActivityNotFoundException ex) { 
Toast.makeText(MainActivity.this, 
"SMS faild, please try again later.", Toast.LENGTH_SHORT ) 
} 
} 
QOverride 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 





Fl res/layout/activity main.xml 文件 的 内 容 : 


«LinearLayout xmlns:android="http://schemas.android.com/apk/res/ant 
android:layout widthz"fill parent" 
android:layout height-"fill parent" 
android:orientation="vertical" > 


«Button android:id="@+id/sendSMS" 

android: layout_width="fill_ parent" 

android: layout_height="wrap_content" 

android: text="@string/compose_sms"/> 
</LinearLayout> 


BEE] 
下 面 文件 res/values/strings.xm 的 内 容 中 定义 两 个 新 的 常量 : 





<?xml version="1.0" encoding="utf-8"?> 
<resources> 


<string name="app_name">SendSMSDemo</string> 

«string name-"hello world">Hello world!</string> 
<string name="action_settings">Settings</string> 
«string name-"compose sms"»Compose SMS</string> 


«/resources» 


以 下 是 AndroidManifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.sendsmsdemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses-sdk 
android:minSdkVersion="8" 
android: targetSdkVersion="17" /> 


<application 
android:allowBackup="true" 
android:icon-"Qdrawable/ic launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.sendsmsdemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android:name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 
</manifest> 


LEN 


我 们 尝试 运行 SendSMSDemo 应 用 程序 。 Eclipse AVD 安 装 的 应 用 程序 ， 并 启动 
它 ， 如 果 一 切 设 置 和 应 用 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





6.0.0 Android Device Chooser 
Select a device with min API level 8. 
(*) Choose a running Android device 








Serial Number AVD Name Target Debug State 
8 htc-htc 0ne-FA379W901923|N/A Online 





Launch a new Android Virtual Device 


AVD Name Target Name Platform API Level CPU/ABI Details 
VirtualAVD Android 4.2.2 4.2.2 17 ARM (armeabi 


Start 


Refresh 


Manager 


Use same device for future launches Cancel bas ro 4 
BEES SUSE TEJ ii 


选择 移动 设备 作为 一 个 选项 ， 然 后 检查 移动 设备 ， 这 将 显示 以 下 男 面 : 


1G 7. En 
Fra 2:50 


选择 SMS， 发送 短 信 


现在 使 用 Compose SMS“ 按 和 纽 推出 Android 内 置 的 SMS 客 户 端 ， 如 下 图 所 示 : 


(== 1 380-038-0000 





1 380-038-0000 


Test SMS to Hema. > 


SD in co! 





可 以 修改 默认 字段 最 后 使 用 发 送 短信 按钮 〈 标 有 红色 矩形) 提 到 收 件 人 发 送 短信 。 
以 上 示例 代码 下 载 : http://pan.baidu.com/s/1c0Ah508 


Android 技 打 电 话 -Android 开 发 教程 


每 一 个 Android 设 备 特别 是 手机 都 提供 一 个 拨打 电话 功能 ， 但 仍然 需要 编写 一 个 应 
用 程序 ， 给 用 户 一 个 选择 使 用 硬 编码 的 电话 号 码 拨打 电话 。 


本 章 列 出 了 一 个 简单 的 步骤 来 创建 一 个 点 用 程序 ， 它 可 以 用 来 拷打 电话 。 使 用 
Android 的 Intent 通过 调用 Android 内 和 置 的 电话 通话 功能 。 以 下 部 分 说 明 Intent 对 象 
的 拨打 电话 功能 。 


Intent 对 象 - 操作 拨打 电话 


使 用 ACTION_CALL 动作 触发 Android 设 各 内 置 电 话 功 能 。 以 下 是 简单 的 语法 用 来 
创建 一 个 Intent 的 ACTION_CALL 动作 


Intent phoneIntent = new Intent(Intent.ACTION CALL); 


可 以 使 用 ACTION DIAL 动作 ， 而 不 是 ACTION_CALL， 在 这 种 情况 下 ， 在 使 用 选 
项 来 修改 硬 编码 的 电话 号 码 拨打 电话 之 前 ， 而 不 是 直接 调用 的 。 


Intent 对 象 - 数据 /电话 呼叫 类 型 


这 里 给 定 电话 为 13800138000 找 打 一 个 电话 ， 需 要 使 用 setData() 方 法 指定 URI 为 
tel: 如 下 : 


phoneIntent.setData(Uri.parse("tel:13800138000")); 


要 注意 的 一 点 是 ， 拨 打 电 话 不 需要 任何 额外 的 数据 或 数据 类 型 指定 。 


示例 
下 面 的 示例 演示 如 何在 实际 使 用 Android Intent 打 电 话 给 定 的 手机 号 码 。 
要 党 试 这 个 例子 中 ， 需 要 实际 配备 了 最 新 的 Android OS 移动 设备 ， 否 则 仿真 


as 5) eee rm itd 


5 
6 


T8 


iE 


使 用 Android Studio 创 建 Android 应 用 程序 ， 并 将 它 命名 为 
PhoneCallDemounder, 创建 这 个 项 目 ， 确 保 目标 SDK 编 译 在 Android 
SDK 的 最 新 版 本 或 使 用 更 高 级 别 的 API 


修改 src/MainActivity.java 文件 ， 并 添加 所 需 的 代码 ， 以 拨打 电话 


修改 所 需 的 布局 XML 文件 res/layout/activity main.xml 添加 GUI 组 件 。 添 
加 一 个 简单 的 按钮 来 拨打 号 码 : 13800138000 


修改 res/values/strings.xml 定义 所 需 的 常数 值 
修改 AndroidManifest.xml 如 下 所 示 
运行 该 应 用 程序 启动 Android 模 拟 器 并 验证 应 用 程序 所 做 的 修改 结果 


以 下 是 修改 主 活动 文件 src/com.yiibai.phonecalldemo/MainActivity.java 的 内 容 如 


F: 


package com.yiibai.phonecalldemo; 


import 
import 
import 
import 
import 
import 
import 
import 
import 


public 


android.net.Uri; 
android.os.Bundle; 
android.app.Activity; 
android.content.Intent; 
android.util.Log; 
android.view.Menu; 
android.view.View; 
android.widget.Button; 
android.widget.Toast; 


class MainActivity extends Activity { 


@Override 


pro 


1); 
} 


tected void onCreate(Bundle savedInstanceState) { 
super .onCreate(savedInstanceState) ; 
setContentView(R.layout.activity main); 


Button startBtn - (Button) findViewById(R.id.makeCall); 
startBtn.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) { 
makeCall(); 


j 


protected void makeCall() ( 


j 


Log.i("Make call", ""); 


Intent phoneIntent = new Intent(Intent.ACTION CALL); 
phoneIntent.setData(Uri.parse("tel:91-800-001-0101")); 


try { 
startActivity(phoneIntent); 


finish(); 
Log.i("Finished making a call...", ""); 
) catch (android.content.ActivityNotFoundException ex) { 
Toast.makeText(MainActivity.this, 
"Call faild, please try again later.", Toast.LENGTH SHORT: 


j 


@Override 
public boolean onCreateOptionsMenu(Menu menu) { 


// Inflate the menu; this adds items to the action bar if it 
getMenuInflater().inflate(R.menu.main, menu); 
return true; 








下 面 是 res/layout/activity_main.xml 文件 的 内 容 : 


<LinearLayo 
android: 
android: 
android: 


«Button 

android: 
android: 
android: 


ut xmlns:android-"http://schemas.android.com/apk/res/ant 
layout width-z"fill parent" 

layout height-z"fill parent" 

orientation-"vertical" » 


android: id="@+id/makeCall" 
layout width-z"fill parent" 
layout height-z"wrap content" 
text-"Qstring/make call"/» 


</LinearLayout> 


aL — BR 





下 面 文件 res/values/strings.xml 的 内 容 中 定义 两 个 新 的 常量 : 


«?xml versi 
«resources» 


«string 
«string 
«string 
«string 


«/resources 


以 下 是 Android 


onz"1.0" encoding="utf -8"?> 


name="app_name">PhoneCallDemo</string> 

name="hello_world">Hello world!</string> 

name="action_settings">Settings</string> 

name="make_call">Call 91-800-001-0101</string> 
> 


Manifest.xml 文件 的 默认 内 容 : 


<?xml version="1.0" encoding="utf-8"?> 

«manifest xmlns:android="http://schemas.android.com/apk/res/androic 
package="com. yiibai.phonecalldemo" 
android: versionCode="1" 
android: versionName="1.0" > 


<uses -sdk 

android: minSdkVersion="8" 

android: targetSdkVersion="17" /> 
«uses-permission android:name="android.permission.CALL_PHONE" /: 
«uses-permission android:name-"android.permission.READ PHONE ST/ 


«application 
android:allowBackup="true" 
android: icon="@drawable/ic_launcher" 
android: label="@string/app_name" 
android: theme="@style/AppTheme" > 
<activity 
android: name="com. yiibai.phonecalldemo.MainActivity" 
android: label="@string/app_name" > 
<intent-filter> 
<action android:name="android.intent.action.MAIN" , 


«category android: name="android.intent.category.LAl 
</intent-filter> 
</activity> 
</application> 
</manifest> 


J al:: 


我 们 尝试 运行 PhoneCallDemo 应 用 程序 。Eclipse AVD 安 装 的 应 用 程序 ， 并 启动 
它 ， 如 果 一 切 设置 和 应 用 代码 都 没有 问题 ， 它 会 显示 以 下 模拟 器 窗口 : 





18.0.0 Android Device Chooser 


Select a device with min API level 8. 


(*) Choose a running Android device 


| Serial Number AVD Name Debug State 
= hrtc-htc one-FA379W901923|N/A Online 





Launch a new Android Virtual Device 


AVD Name Target Name Platform API Level CPU/ABI Details. 
VirtualAVD Android 4.2.2 4.2.2 17 ARM (armeabi 
Start 
| 
Refresh 
Manager 
Use same device for future launches Cancel bo r- 
AIL Con 


选择 移动 设备 作为 一 个 选项 ， 然 后 检查 移动 设备 ， 这 将 显示 以 下 男 面 : 





Call 138 0013 8000 


现在 使 用 按钮 拨打 138001380000， 如 下 所 示 : 


S 


1 380-013-8000 





以 上 代码 下 载 : 
http://pan.baidu.com/s/1hq1RSuK 


TutorialsPoint 移动 端 教程 


发 布 Android 应 用 - Android 开 发 教程 


Android 应 用 程序 的 发 布 是 一 个 过 程 ， 让 Android 的 应 用 程序 提供 给 用 户 。 发 布 的 
Android 应 用 程序 开发 过 程 的 最 后 阶段 。 


一 旦 开发 和 全 面 测试 Android 应 用 程序 ， 就 可 以 开始 销售 或 分 发 免费 使 用 谷歌 播放 
(著名 的 Android 市 场 ) 。 也 可 以 发 布 应 用 程序 ， 通 过 它们 直接 发 送 给 用 户 ， 让 用 
户 下 载 他 们 从 自己 的 网 站 。 


在 Android 官 方 网 站 上 ， 可 以 检查 详细 的 出 版 过 程 中 ， 但 本 教程 将 通过 简单 的 步骤 
来 启动 应 用 程序 ， 谷 歌 播放 。 下 面 是 一 个 简化 的 检查 清单 ， 这 将 帮助 在 推出 
Android 应 用 程序 : 


发 布 Android 应 用 - Android 开 发 教程 181 


Activity 


Regression Testing Before you publish your application, you need to 
make sure that its meeting the basic quality expectations for all Android 
apps, on all of the devices that you are targeting. So perform all the 
required testing on different devices including phone and tablets. 


Application Rating When you will publish your application at Google 
Play, you will have to specify a content rating for your app, which informs 
Google Play users of its maturity level. Currently available ratings are (a) 
Everyone (b) Low maturity (c) Medium maturity (d) High maturity. 


Targeted Regions Google Play lets you control what countries and 
territories where your application will be sold. Accordingly you must take 
care of setting up time zone, localization or any other specific 
requirement as per the targeted region. 


Application Size Currently, the maximum size for an APK published on 
Google Play is 50 MB. If your app exceeds that size, or if you want to 
offer a secondary download, you can use APK Expansion Files, which 
Google Play will host for free on its server infrastructure and 
automatically handle the download to devices. 


SDK and Screen Compatibility It is important to make sure that your 
app is designed to run properly on the Android platform versions and 
device screen sizes that you want to target. 


Application Pricing Deciding whether you app will be free or paid is 
important because, on Google Play, free apps must remain free. If you 
want to sell your application then you will have to specify its price in 
different currencies. 


Promotional Content It is a good marketing practice to supply a variety 
of high-quality graphic assets to showcase your app or brand. After you 

publish, these appear on your product details page, in store listings and 

search results, and elsewhere. 


Build and Upload release-ready APK The release-ready APK is what 
you you will upload to the Developer Console and distribute to users. 
You can check complete detail on how to create a release-ready version 
of your app: Preparing for Release. 


Finalize Application Detail Google Play gives you a variety of ways to 
promote your app and engage with users on your product details page, 
from colorful graphics, screenshots, and videos to localized descriptions, 
release details, and links to your other apps. So you can decorate your 
application page and provide as much as clear crisp detail you can 
provide. 


导出 Android ù FH 


作为 一 个 APK (Android 包 ) 文件 ， 需 要 将 应 用 程序 导出 之 前 上 传 谷歌 播放 市 场 。 


要 导出 应 用 程序 ， 只 要 打开 该 应 用 程序 的 Eclipse 项 目 中 ， 从 Eclipse 中 选择 File- 
>Export 并 按照 简单 的 步骤 来 导出 应 用 程序 : 


eoo0 Export 


Select A 








Select an export destination: 





type filter text 


b (= General 
Y (z» Android 
Export Android Application 


(® Generate Gradle build files 
> C/C 


b (Install 

> @ Java 

> (> Run/Debug 
> ( Team 

b E XML 

> (= Other 








(3) « Back [ Next> ) | | Cael - | Finish 


Hy), 


接 下 来 选择 Export Android Application 选项 ， 在 上 面 的 屏幕 截图 所 示 ， 然 后 单 
击 "Next “， 再 Next ， 这 样 得 到 的 画面 ， 在 那里 先 择 "Create new keystore" 来 存储 
应 用 程序 。 


COM 
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O Cr mm | © 
Where: | 国 Desktop : (Desktop = | || 1| 








Keystore selection 
@ Enter path to keystore. 








. ) Use existing keystore 














col 


输入 密码 来 保护 应 用 程序 ， 并 单 击 "Next "按钮 ， 再 次 。 它 会 显示 以 下 画面 ， 让 应 用 
程序 创建 一 个 密 钥 : 





. . 
DOr Android. DDIiIiCa!l tio! 


EAPO Aridroia AppDilcatior 


Key Creation 
db A 25 year certificate validity is recommended. 























Alias: PhoneDemo 
Password: sesso 
Confirm: senecces 
Validity (years): [2 











First and Last Name: John Imrahim 








Organizational Unit: | Mobile Development 








Organization: | tutorialspoint 
City or Locality: Hyderabad | 
State or Province: | 
Country Code 000: [INDIA] 


J 























Q (Near) N.N 


iioi Cou 
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一 旦 填写 的 所 有 信息 ， 单 击 “Next ”按钮 ， 最 后 它 会 问 申 请 将 导出 的 位 置 : 
eoo Export Android Application 
Destination and key/certificate checks 


Destination APK file: | /Users/mahnaz/Desktop/PhoneCallDemo.apk 


ertificate expires in 





D «Back || Next> 


| — Cancel - | [ Finish | 
JNO COW 


最 后 ， 单 击 “Finish "按钮 ， 生 成 Android 应 用 程序 包 文件 将 被 上 传 在 谷歌 播放 市 场 。 
谷歌 播放 注册 


最 重要 的 一 步 是 注册 谷歌 播放 使 用 谷歌 播放 市 场 。 可 以 使 用 您 现 有 的 Google ID, 
如 果 没有 可 以 创建 一 个 新 的 Google ID， 然 后 注册 和 与 市 场 。 将 有 以 下 屏幕 接受 的 条 
款 和 条 件 。 
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b Goog le play | Developer Console 


端 教程 


Sign-i^ with your Google Accept Developer Pay Negistration Fee Complete your Account 
account Agreement Ostale 


YOU ARE SIGNED IN AS.. 


Mohd Mohtashim 
人 avood amin gmna com 
BEFORE YOU CONTINUE... 
Read and agree to the Googe Foy Do pe 
jatribution agreerrent 


M1 agree and | am milling 10 associate my 
eocourt registration with the Google Play 
Developer datébution agreement. 


Contíruse to payment 


This is the Google account that will be associated with your Developer Console. 


M you would Vie to use a diferent account, you can choose from the following options below. if you we an 
organization, consider registering a now Googie account rather than using a pertonal account 


fign in with a dart accord Owais a ww Googie accourt 


e» = S25 
Review the c in Comte where you can dat tute Mako sure you have your credit cand handy to pay 


ard ve! applicators the $25 registration fee in the nent step. 


he ceo DOE esi tope Aach f 
a merchant account In your country. 


jilosi eorn 


可 以 使 用 Continue to payment' 按 钮 ， 继 续 进 行 付 款 登 记 费 $25， 并 最 终 完 成 帐户 细 
节 。 


一 旦 你 是 一 个 


注册 用 户 在 Google Play， 您 可 以 上 传 您 的 应 用 程序 release-ready 


APK， 最 后 将 完成 应 用 程序 的 详细 使 用 上 述 清单 的 第 9 步 中 提 到 的 应 用 程序 的 详细 
RA 


ye 
人 7 
e 
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W3School lonic 教程 


作者 : W3School 
来 源 : lonic 教程 


ionic 人 门 


ionic 简介 





IONIC 


ionic 是 一 个 强大 的 HTML5 应 用 程序 开发 框架 (HTML5 Hybrid Mobile App 
Framework )。 可 以 帮助 您 使 用 Web 技术 ， 比 如 HTML、CSS 和 Javascript 构建 
接近 原生 体验 的 移动 应 用 程序 。 


ionic 主要 关注 外 观 和 体验 ， 以 及 和 你 的 应 用 程序 的 UI 交互 ， 特 别 适 合用 于 基于 
Hybird 模式 的 HTML5 移动 应 用 程序 开发 。 


ionic 是 一 个 轻 量 的 手机 Ul 库 ， 具 有 速度 快 ， 界 面 现代 化 、 美 观 等 特点 。 为 了 解决 其 
他 一 些 UI| 库 在 手机 上 运行 缓慢 的 问题 ， 它 直接 放弃 了 IOS6 和 Android4.1 以 下 的 版 本 
支持 ， 来 获取 更 好 的 使 用 体验 。 


ionic 特点 


e 1.ionic 基于 Angular 语 法 ， 简 单 易学 。 

e 2.ionic 是 一 个 轻 量 级 框架 。 

e 3.ionic 完美 的 融合 下 一 代 移 动 框架 ， 支 持 Angularjs 的 特性 ， MVC ， 代 码 易 
of +P, 

e 4.ionic 提供 了 漂亮 的 设计 ， 通 过 SASS 构建 应 用 程序 ， 它 提供 了 很 多 Ul 组 件 
来 帮助 开发 者 开发 强大 的 应用 。 

e 5.ionic 专注 原生 ， 让 你 看 不 出 混合 应 用 和 原生 的 区 别 

6.ionic 提供 了 强大 的 命令 行 工具 。 

e 7.ionic 性 能 优越 ， 运 行 速 度 快 。 


学 习 本 教程 前 你 需要 了 解 ? 
学 习 本 教程 前 你 需要 了 解 以 下 基础 知识 : 
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HTML 
CSS 
Javascript 
Angular 


ionic 相关 内 容 


ionic 官方 网 站 : http://ionicframework.com/ 


ionic 官方 文档 : http://ionicframework.com/docs/ 


Github Haut : https://github.com/driftyco/ionic 


ionic 简介 
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ionic 安装 


本 站 实例 采用 了 ionic v1.0.1 版 本 ， 下 载 地 址 为 : ionic-v1.0.1.zip。 
ionic le : http://ionicframework.com/docs/overview/#download. 
下 载 后 解压 ， 包 含 以 下 目录 : 


css/ => 样式 文件 
fonts/ -» 字体 文件 

js/ => Javascript x 
version.json => 版 本 更 新 说 明 


你 也 可 以 在 Github 上 下 载 以 下 资源 文件 : https://github.com/driftyco/ionic (TE 
release 目录 中 ) 。 


接 下 来 ， 我 们 只 需要 在 项 目 中 引入 以 上 目录 中 的 css/ionic.min.css 和 
js/ionic.bundle.min.js 文件 即 可 创建 ionic 应 用 。 


实例 


<ion-header-bar class="bar-positive"> 
«h1 class="title">Hello World!</h1> 
</ion-header -bar> 


<ion-content> 
<p> 我 的 第 一 个 ionic 应 用 。</p> 
</ion-content> 


ma "尝试 一 下 " 按钮 查看 在 线 实例 。 
本 教程 着 重 讲解 ionic 框架 的 应 用 ， 大 部 分 实例 在 浏览 器 中 运行 ， 移 动 设备 上 运行 
可 以 在 接 下 来 的 命令 行 安装 教程 中 详细 了 解 。 


注意 : 在 移动 应 用 如 phonegap 中 我 们 只 需 将 对 应 的 js 和 css 文件 加 入 到 资源 库 中 
即 可 。 


命令 行 安装 
首先 您 需要 安装 Node js， M USE TUNISIE 到 其 NPM 工具 ， 更 多 
NPM 介绍 可 以 查看 我 们 的 NPM 使 用 介绍 。 


然后 通过 命令 行 工 具 安 装 最 新 版 本 的 cordova 和 ionic 。 通 过 参考 Android 和 iOS 
官方 文档 来 安装 。 


Window 和 Linux 上 打开 命令 行 工 具 执 行 以 下 命令 : 


$ npm install -g cordova ionic 


Mac 系统 上 使 用 以 下 命令 : 
sudo npm install -g cordova ionic 
fem: /OS 需要 在 Mac Os X. 和 Xcode 环境 下 面 安 装 使 用 。 
如 果 你 已 经 安装 了 以 上 环境 ， 可 以 执行 以 下 命令 来 更 新 版 本 : 


npm update -g cordova ionic 


X 


sudo npm update -g cordova ionic 


创建 应 用 
使 用 ionic 官 方 提供 的 现成 的 应 用 程序 模板 ， 或 一 个 空白 的 项 目 创建 一 个 ionic 应 用 : 


$ ionic start myApp tabs 


运行 我 们 刚才 创建 的 ionic 项 目 

使 用 ionic tool 创建 ， 测 试 ， 运 行 你 的 apps( 或 者 通过 Cordova 直 接 创建 )。 
创建 android 应 用 : 

cd myApp 

ionic platform add android 


ionic build android 
ionic emulate android 


€ A 0 €9 


创建 ios 应 用 : 


cd myApp 
ionic platform add ios 
ionic build ios 


$ 
$ 
$ 
$ ionic emulate ios 


TutorialsPoint 移动 端 教程 


4 


193 


对 
pu 


ionic 


ionic 创建 APP 


前 面 的 章节 中 我 们 已 经 学 会 了 ionic 框架 如 何 导 入 到 项 目 中 。 
接 下 来 我 们 将 为 大 家 介绍 如 何 创 建 一 个 ionic APP 应 用 。 


ionic 创建 APP 使 用 HTML、CSS 和 Javascript 来 构建 ， 所 以 我 们 可 以 创建 一 个 
www 目录 ， 并 在 目录 下 创建 index.html 文件 ， 代 码 如 下 : 


<!DOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Todo</title> 
«meta name-"viewport" content-"initial-scale-1, maximum-scale=: 


«link hrefz"lib/ionic/css/ionic.css" rel="stylesheet"> 
«script src="lib/ionic/js/ionic.bundle.js"></script> 


«!-- 在 使 用 Cordova/PhoneGap 创建 的 APP 中 包含 的 文件 ， 由 Cordova/Ph 
«script src="cordova.js"></script> 
</head> 
<body> 
</body> 
</html> 


4] = E 





以 上 代码 中 ， 我 们 引入 了 lonic CSS 文件 、 lonic JS 文件 及 lonic AngularJS 扩展 
ionic.bundle.js (ionic.bundle.js) 。 


ionic.bundle.js 文件 已 经 包含 了 lonic 核 心 JS、AngularJS、lonic 的 AngularJS 扩 
展 ， 如 果 你 需要 引入 其 他 Angular 模块 ， 可 以 从 lib/js/angular 目录 中 调用 。 


cordova.js 是 在 使 用 Cordova/PhoneGap 创建 应 用 时 生成 的 ， 不 需要 手动 引入 ， 你 
可 以 在 Cordova/PhoneGap 项 目 中 找到 该 文件 ， 所 以 在 开发 过 程 中 显示 404 是 正 
常 的 。 


创建 APP 


接 下 来 我 们 来 实现 一 个 包含 标题 、 侧 边栏 、 列 表 等 的 应 用 ,设计 图 如 下 : 


M ABC 3G 09-13 AM 


= 
Projects = 


Groceries 


Pokémans 


m 

New 
© 
© 
© 
© 
© 
© 
© 
© 
© 
© 
© 





创建 侧 边 栏 
侧 边 栏 创建 使 用 ion-side-menus 控制 器 。 
编辑 我 们 先前 创建 的 index.html 文件 ， 修 改 <body> AMAA, WRATH : 


<body> 
<ion-side-menus> 
<ion-side-menu-content> 
</ion-side-menu-content> 
«ion-side-menu side="left"> 
</ion-side-menu> 
</ion-side-menus> 
</body> 


控制 器 解析 : 


e ion-side-menus : 是 一 个 带 有 边栏 菜单 的 容器 ， 可 以 通过 点 击 按钮 或 者 滑动 
屏幕 来 展开 菜单 。 


e ion-side-menu-content : 展示 主要 内 容 的 容器 ， 可 以 通过 滑动 屏幕 来 展开 
menu。 
e ion-side-menu : 存放 侧 边栏 的 容器 。 


初始 化 APP 
创建 一 个 新 的 AngularJS 模块 ， 并 初始 化 ， 代 码 位 于 www/js/app.js 


angular.module('todo', ['ionic']) 


之 后 在 我 们 的 body 标签 中 添加 ng-app 属性 : 


«body ng-app="todo"> 


在 index.html 文件 的 <script src="cordova.js"></script> 上 面 引 入 app.js 文件 : 


«script src="js/app.js"></script> 


修改 index.html 文件 body 标签 的 内 容 ， 代 码 如 下 所 示 : 


«body ng-app="todo"> 
<ion-side-menus> 


<!-- 中 心 内 容 --> 
«ion-side-menu-content» 
«ion-header-bar class="bar-dark"> 
«hi class="title">Todo</hi> 
</ion-header -bar> 
<ion-content> 
</ion-content> 
</ion-side-menu-content> 


«1-- 左 侧 菜单 --> 
«ion-side-menu side="left"> 
«ion-header-bar class="bar-dark"> 
«hi class="title">Projects</h1> 
</ion-header -bar> 
</ion-side-menu> 


</ion-side-menus> 
</body> 


以 上 步骤 我 们 已 经 完成 了 ionic 基本 APP 的 应 用 。 


创建 列表 
首先 创建 一 个 控制 器 TodoCtrl : 


«body ng-app="todo" ng-controller="TodoCtrl"> 


在 app.js 文 件 中 ， 使 用 控制 器 定义 列表 数据 : 


angular.module('todo', ['ionic']) 


.controller('TodoCtrl', function($scope) { 
$scope.tasks - [ 
{ title: ' 菜 乌 教 程 ' }， 
{ title: 'www.runoob.com' }, 
{ title: ' 菜 乌 教 程 ' }， 
{ title: 'www.runoob.com' } 


在 index.html 页 面 中 数据 列表 我 们 使 用 Angular ng-repeat 来 迭代 数据 : 


<!-- 中 心 内 容 - -> 
<ion-side-menu-content> 
<ion-header-bar class="bar-dark"> 
«hi class="title">Todo</hi> 
</ion-header-bar> 
<ion-content> 
<!-- 列表 --> 
«ion-list» 
«ion-item ng-repeat="task in tasks"> 
{{task.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu-content> 


修改 后 index.html body 标签 内 代码 如 下 : 


«body ng-app="todo" ng-controller="TodoCtrl"> 
<ion-side-menus> 


«I-- 中 心 内 容 --> 
«ion-side-menu-content» 
«ion-header-bar class="bar-dark"> 
«hi class="title">Todo</hi> 
</ion-header -bar> 
<ion-content> 
«1-- 列表 --> 
<ion-list> 
<ion-item ng-repeat="task in tasks"> 
{{task.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu-content> 


<!-- 左 侧 菜 单 --> 
«ion-side-menu side="left"> 
<ion-header-bar class="bar-dark"> 
«hi class="title">Projects</h1> 
</ion-header -bar> 
</ion-side-menu> 


</ion-side-menus> 
«script src="http://www.runoob.com/static/ionic/js/app.js"></s¢ 


«script src="cordova.js"></script> 
</body> 


EJE 


创建 添加 页 面 


修改 index.html 在 </ion-side-menus> 后 添加 如 下 代码 : 





«script id="new-task.html" type="text/ng-template"> 
<div class="modal"> 


<!-- Modal header bar --> 
«ion-header-bar class="bar-secondary"> 

<h1 class="title">New Task</h1i> 

«button class="button button-clear button-positive" ng-click: 
</ion-header -bar> 


<!-- Modal content area --> 
<ion-content> 


<form ng-submit="createTask(task)"> 
<div class="list"> 
<label class="item item-input"> 
<input type="text" placeholder="What do you need to do‘ 
</label> 
</div> 
<div class="padding"> 
«button type="submit" class="button button-block button-[ 
«/div» 
</form> 


</ion-content> 
</div> 


</script> 


E u m 





以 上 代码 中 我 们 通过 «script id="new-task.html" type="text/ng-template"> 定义 
了 新 的 模板 页 面 。 


表单 提交 时 触发 createTask(task) WAX. 
ng-model-"task.title" 会 将 表单 的 输入 数据 赋值 给 task 对 象 的 title 属性 。 
修改 <ion-side-menu-content> 内 的 内 容 ， 代 码 如 下 : 


«1-- 中 心 内 容 --> 
«ion-side-menu-content» 
«ion-header-bar class="bar-dark"> 
«hi1 class="title">Todo</h1> 
<!-- 新 增 按钮 - -> 
«button class="button button-icon" ng-click="newTask()"> 
<i class="icon ion-compose"></i> 
</button> 
«/ion-header-bar» 
<ion-content> 
<!-- 列表 --> 
<ion-list> 
<ion-item ng-repeat="task in tasks"> 
{{task.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu-content> 


app.js 文件 中 ， 控 制 器 代码 如 下 : 


angular.module('todo', ['ionic']) 


.controller('TodoCtrl', function($scope, $ionicModal) { 
$scope.tasks - [ 
[ title: ' 菜 乌 教 程 ' }， 
{ title: 'www.runoob.com' }, 
{ title: ' 菜 乌 教 程 ' }， 
{ title: 'www.runoob.com' } 


1; 


// 创建 并 载 入 模型 

$ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
$scope.taskModal - modal; 

} {í 
scope: $scope, 
animation: 'slide-in-up' 


}); 


// 表单 提交 时 调用 
$scope.createTask = function(task) { 
$scope.tasks.push({ 
title: task.title 


}); 
$scope.taskModal.hide(); 
task titlet: na. 

E 


// 打开 新 增 的 模型 
$scope.newTask = function() { 
$scope.taskModal.show(); 


, 


// 关闭 新 增 的 模型 
$scope.closeNewTask = function() { 
$scope.taskModal.hide(); 


, 


2r 


创建 侧 边栏 


通过 以 上 步骤 我 们 已 经 实现 了 新 增 功 能 ， 现 在 我 们 为 app 添加 侧 边 栏 功 能 。 
修改 内 的 内 容 ， 代 码 如 下 : 


«1-- 中 心 内 容 --» 
«ion-side-menu-content» 
«ion-header-bar class="bar-dark"> 
«button class="button button-icon" ng-click="toggleProjects()"> 
«i class="icon ion-navicon"></i> 
</button> 
«hi class="title">{{activeProject.title}}</h1> 
<!-- 新 增 按钮 --> 
«button class="button button-icon" ng-click="newTask()"> 
«i class="icon ion-compose"></i> 
</button> 
«/ion-header-bar» 
«ion-content scroll="false"> 
«ion-list» 
«ion-item ng-repeat="task in activeProject.tasks"> 
{{task.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu-content> 


4 1) 


添加 侧 边 栏 : 


<!-- 左边 栏 --> 
«ion-side-menu side="left"> 
<ion-header-bar class="bar-dark"> 
«hi class="title">Projects</h1> 
«button class="button button-icon ion-plus" ng-click-z"newProjecti 
«/button» 
«/ion-header-bar» 
«ion-content scroll="false"> 
<ion-list> 
<ion-item ng-repeat="project in projects" ng-click="SelectProje 
{{project .title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 





<ion-item> 中 的 ng-class 指 命 设置 菜单 激活 样式 。 
这 里 我 们 创建 一 个 新 的 js 文件 app2.js( 为 了 不 与 前 面 的 混淆 )， 代 码 如 下 : 


angular.module('todo', ['ionic']) 

JETA 
* The Projects factory handles saving and loading projects 
* from local storage, and also lets us save and load the 


* last active project index. 
Tu 
.factory('Projects', function() { 
return { 
all: function() { 
var projectString - window.localStorage['projects']; 
if(projectString) ( 
return angular.fromJson(projectString); 


return []; 
i 
save: function(projects) ( 
window.localStorage['projects'] = angular.toJson(projects); 
}, 
newProject: function(projectTitle) { 
// Add a new project 


return { 
title: projectTitle, 
tasks: [] 
3 
ty 


getLastActiveIndex: function() { 
return parseInt(window.localStorage['lastActiveProject']) || 
ty 
setLastActiveIndex: function(index) { 
window.localStorage['lastActiveProject'] - index; 


} 
} 
}) 


.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Pr« 


// A utility function for creating a new project 

// with the given projectTitle 

var createProject = function(projectTitle) { 
var newProject - Projects.newProject(projectTitle); 
$scope.projects.push(newProject); 
Projects.save($scope.projects); 
$scope.selectProject(newProject, $scope.projects.length-1); 


j 


// Load or initialize projects 
$scope.projects - Projects.all(); 


// Grab the last active, or the first project 
$scope.activeProject = $scope.projects[Projects.getLastActiveIndt 


// Called to create a new project 
$scope.newProject = function() { 
var projectTitle - prompt('Project name'); 
if(projectTitle) ( 
createProject(projectTitle); 


j 


) 


// Called to select the given project 

$scope.selectProject - function(project, index) ( 
$scope.activeProject - project; 
Projects.setLastActivelndex(index); 
$ionicSideMenuDelegate.toggleLeft(false); 


m 


// Create our modal 
$ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
$scope.taskModal - modal; 


ju 
scope: $scope 
3); 
$scope.createTask = function(task) { 
if(!$scope.activeProject || !task) { 
return; 
} 


$scope.activeProject.tasks.push({ 
title: task.title 


3); 
$scope.taskModal.hide(); 


// Inefficient, but save all the projects 
Projects.save($scope.projects); 


task.title = ""; 
J; 


$scope.newTask = function() { 
$scope.taskModal.show(); 


H 


$scope.closeNewTask = function() { 
$scope.taskModal.hide(); 


j 


$scope.toggleProjects - function() ( 
$ionicSideMenuDelegate.toggleLeft(); 


H 


// Try to create the first project, make sure to defer 
// this by using $timeout so everything is initialized 
// properly 
$timeout(function() { 
if($scope.projects.length == 0) { 
while(true) { 
var projectTitle = prompt('Your first project title:'); 
if(projectTitle) ( 
createProject(projectTitle); 
break; 








body 中 ion-side-menus 代码 如 下 : 


«ion-side-menus» 


«1-- 中 心 内 容 --> 
<ion-side-menu-content> 
<ion-header-bar class="bar-dark"> 
<button class="button button-icon" ng-click="toggleProjects()"> 
<i class="icon ion-navicon"></i> 
</button> 
<hi class="title">{{activeProject.title}}</h1> 
<!-- 新 增 按 钮 - -> 
«button class="button button-icon" ng-click="newTask()"> 
«i class="icon ion-compose"></i> 
</button> 
</ion-header-bar> 
<ion-content scroll="false"> 
<ion-list> 
<ion-item ng-repeat="task in activeProject.tasks"> 
{{task.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu-content> 


<!-- 左边 栏 --> 
«ion-side-menu side="left"> 
<ion-header-bar class="bar-dark"> 
«hi class="title">Projects</h1> 
«button class="button button-icon ion-plus" ng-click="newProject | 
</button> 
</ion-header -bar> 
<ion-content scroll="false"> 
<ion-list> 
<ion-item ng-repeat="project in projects" ng-click="SelectProje 
{{project.title}} 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 


</ion-side-menus> 
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ionic CSS 


ionic 头 部 与 底部 


Header( 头 部 ) 
Header 是 固定 在 屏幕 项 部 的 组 件 ,可 以 包 如 标题 和 左右 的 功能 按钮 。 
ionic 默认 提供 了 许多 种 颜色 样式 ， 你 可 以 调用 不 同 的 样式 名 ， 当 然 也 可 以 自 定 义 一 


qu 
bar-light 


«div class-"bar bar-header bar-light"» «hi class="title">bar -1ic 


B ——————————— e —fÁ 





bar-stable 


«div class="bar bar-header bar-stable"» «hà class="title">bar-si 


E —— —— Pit 





bar-positive 


«div class="bar bar-header bar-positive"» <hi class="title">bar.- 


-| 0 ERE 1 





bar-calm 


«div class="bar bar-header bar-calm"» «hà class="title">bar-calr 





bar-balanced 


«div class="bar bar-header bar-balanced"» «hài class="title">bar- 


Bee —SA————————————ááÜÜÓ 





bar-energized 


«div class="bar bar-header bar-energized"» <hi class="title">bai 


«| _ d 








bar-assertive 


«div class="bar bar-header bar-assertive"» «hà class="title">ba) 


«| — : P 








bar-royal 


«div class="bar bar-header bar-royal"» <h1 class="title">bar -ro\ 


E NEN 





bar-dark 


«div class="bar bar-header bar-dark"> «hà class="title">bar-darl 


E = 





Sub Header (副标题 ) 


Sub Header 同 样 是 固定 在 顶部 ， 只 是 是 在 Header 的 下 面 ， 就 算 没 有 写 Header 这 
^, Sub Header 这 个 样式 也 会 距离 顶部 有 一 个 Header 的 距离 。 颜 色 样 式 同 Header 


o 


<div class="bar bar-header"» «hi class="title">Header</hi>  «/d: 





Footer( 底 部 ) 
Footer 是 在 屏幕 的 最 下 方 ， 可 以 包含 多 种 内 容 类 型 。 


«div class="bar bar-footer bar-balanced"> «div class="title">Foc 
E E) 
Footer 同上 面 的 Header， 只 是 把 样式 名 bar-header 换 做 bar-footer 。 





«div class="bar bar-footer"» «button class="button button-clear' 
‘| __ 


此 外 ， 如 果 底 部 没有 标题 ， 但 是 又 需要 右边 的 按钮 ， 你 需要 在 右 侧 按钮 添加 pull- 
right 如 : 








«div class="bar bar-footer"» «button class="button button-clear 


«| B 








ionic 按钮 
按钮 是 移动 app 不 可 或 缺 的 一 部 分 ， 不 同 风 格 的 app， 需 要 的 不 同 按钮 的 样式 。 
默认 情况 下 ， 按 钮 显示 样式 为 display: inline-block. 


«button class="button"> 
Default 
«/button» 


«button class="button button-light"> 
button-light 
«/button» 


«button class="button button-stable"> 
button-stable 
</button> 


<button class="button button-positive"> 
button-positive 
«/button» 


«button class="button button-calm"> 
button-calm 
«/button» 


«button class="button button-balanced"» 
button-balanced 
«/button» 


«button class="button button-energized"> 
button-energized 
«/button» 


«button class="button button-assertive"> 
button-assertive 
</button> 


<button class="button button-royal"> 
button-royal 
«/button» 


«button class="button button-dark"> 
button-dark 
</button> 


button-block 样式 按钮 显示 为 : display: block， 它 将 完全 填充 父 元 素 的 宽度 ， 包 


了 内 边 距 属性 padding。 


«button class="button button-block button-positive"> 
Block Button 
«/button» 


使 用 button-full 类 ， 可 以 让 按钮 显示 完全 宽度 ， 且 不 包含 内 边 距 padding。 


<button class="button button-full button-positive"> 
Full width Block Button 
«/button» 


不 同 大 小 的 按钮 
button-large 设置 为 大 按钮 ，button-small 设置 为 小 按钮 。 


«button class="button button-small button-assertive"> 
Small Button 

</button> 

<button class="button button-large button-positive"> 
Large Button 

</button> 


无 背景 
JDS mit 
button-outline 设置 背景 为 透明 。 


«button class="button button-outline button-positive"> 
Outlined Button 
«/button» 


无 育 景 与 边框 按钮 
button-clear 设置 按钮 背景 为 透明 ， 且 无 边框 。 


«button class="button button-clear button-positive"> 
Clear Button 
«/button» 


图 标 按钮 


我 们 可 以 在 按钮 上 添加 图 标 。 


«button class="button"> 

«i class="icon ion-loading-c"></i> Loading... 
«/button» 
«button class="button icon-left ion-home">Home</button> 
«button class="button icon-left ion-star button-positive">Favorite: 
«a class="button icon-right ion-chevron-right button-calm">Learn Mc 
«a class="button icon-left ion-chevron-left button-clear button-da! 


«button class="button icon ion-gear-a"></button> 


«a class="button button-icon icon ion-settings"></a> 


<a class="button button-outline icon-right ion-navicon button-balar 





Sk BIS S Ms JU AC 


头 部 /底部 可 以 添加 按钮， 按钮 的 样式 根据 头 部 /底部 来 设 定 ， 所 以 你 不 需要 为 按钮 
XS ds an 外 的 样 式 。 


«div class="bar bar-header'» 
«button class="button icon ion-navicon"></button> 
«hi class="title">Header Buttons</h1i> 
<button class="button">Edit</button> 

</div> 


button-clear 类 可 以 设置 无 背景 和 边框 的 头 部 /底部 按钮 。 


«div class="bar bar-header'» 
«button class="button button-icon icon ion-navicon"></button> 
<div class="h1 title">Header Buttons</div> 
«button class="button button-clear button-positive">Edit</button: 
</div> 


-| 
按钮 栏 


R button-bar 类 来 设置 按钮 栏 。 以 下 实例 中 ， 我 们 在 头 部 和 内 容 中 添加 
了 按钮 栏 。 


«div class="button-bar"> 
«a class="button">First</a> 
<a class="button">Second</a> 
<a class="button">Third</a> 
</div> 


ionic 列表 


列表 是 一 个 应 用 广泛 的 界面 元 素 ， 在 所 有 移动 app 中 几乎 都 会 使 用 到 。 
列表 可 以 是 基本 文字 、 按 钮 ， 开 关 ， 图 标 和 缩 略 图 等 。 
列表 项 可 以 是 任何 的 HTML 元 素 。 容器 元 素 需 要 list 类 ， 每 个 列表 项 需要 使 用 item 


米 
Fo 


ionList 和 ionltem 可 以 很 容易 的 支持 各 种 交互 方式 ， 上 比如 ， 滑 动 编辑 ， 拖 动 排 序 ， 以 
及 删 除 项 o 


基本 用 法 : 
«ul class="list"> 
<li class="item"> 
e/a 
</ul> 
列表 分 隔 符 


我 们 可 以 使 用 item-divider 类 来 为 列表 创建 分 隔 符 ， 默 认 情 况 下 ， 列 表 项 以 不 同 的 
背景 颜色 和 字体 加 粗 来 区 分 ， 但 你 也 可 以 很 容易 的 定制 他 。 


«div class="list"> 
«div class="item item-divider"> 
Candy Bars 
</div> 
<a class="item" href="#"> 


Butterfinger 
</a> 


</div> 


带 图 标 列表 
我 们 可 以 在 列表 项 的 左 侧 或 右 侧 指定 图 标 。 


使 用 item-icon-left 图 标 在 左 侧 ， item-icon-right 设置 图 标 在 右 侧 。 如 果 你 需要 在 两 
边 都 有 图 标 ， 则 两 个 类 都 添加 上 即 可 。 


以 下 实例 中 ， 我 们 在 列表 项 中 使 用 了 <a> 标签 ， 使 得 每 个 列表 项 可 点 击 
列表 项 在 使 用 <a> 或 <button> 元 素 时 ， 如 果 右 侧 未 添加 图 标 ， 则 会 自动 添加 上 箭头 


Fo 


实例 中 ， 第 一 项 只 有 左 侧 图 标 ， 第 二 项 左右 均 有 图 标 ， 第 三 项 有 右 侧 图 标 (还 有 注 
f£ item-note) ， 第 四 项 有 badge (标记 ) 元 素 。 


«div class="list"> 


«a class="item item-icon-left" href="#"> 
<i class="icon ion-email"></i> 
Check mail 

</a> 


<a class="item item-icon-left item-icon-right" href="#"> 
«i class="icon ion-chatbubble-working"></i> 
Call Ma 
<i class="icon ion-ios-telephone-outline"></i> 

</a> 


«a class="item item-icon-left" href="#"> 
«i class="icon ion-mic-a"></i> 
Record album 
<span class="item-note"> 
Grammy 
</span> 
</a> 
«a class="item item-icon-left" href="#"> 
<i class="icon ion-person-stalker"></i> 
Friends 
<span class="badge badge-assertive">0</span> 
</a> 


</div> 


按钮 列表 


使 用 item-button-right 或 item-button-left 类 将 按钮 放 在 列表 项 中 。 


«div class="list"> 


«div class="item item-button-right"> 
Call Ma 
«button class="button button-positive"> 
<i class="icon ion-ios-telephone"></i> 
«/button» 
«/div» 


«/div» 


带头 像 列 表 
使 用 item-avatar 来 创建 一 个 带头 像 的 列表 : 


«div class="list"> 


«a class="item item-avatar" href="#"> 
«img src="venkman.jpg"> 
<h2>Venkman</h2> 
<p>Back off, man. I'm a scientist.</p> 

</a> 


</div> 


缩 略 图 列表 


item-thumbnail-left 类 用 于 添加 左 侧 对 齐 的 缩 略图 ， item-thumbnail-right 类 用 于 添 
加 右 侧 对 齐 的 缩 略图 。 


«div class="list"> 


«a class-"item item-thumbnail-left" href="#"> 
«img src="cover.jpg"> 
<h2>Pretty Hate Machine</h2> 
<p>Nine Inch Nails</p> 

</a> 


</div> 


Alix 5z(inset list) 
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Aare IFN E XO : list list-inset， 与 常规 列表 区 别 是 ， 它 设置 了 外 边 距 
(marign) ,类 似 于 选项 卡 。 


内 艇 列表 是 没有 阴影 效果 的 ， 滚 动 时 效果 会 更 好 。 
«div class-"list list-inset"> 
«div class-"item"» 


Raiders of the Lost Ark 
«/div» 


«/div» 


ionic 卡片 


近年 来 卡片 (card) 的 应 用 越 来 越 流 行 ， 卡 片 提供 了 一 个 更 好 组 织 信息 展示 的 工具 。 
针对 移动 端的 应 用 ， 卡 片 会 根据 屏幕 大 小 自 适 应 大 小 。 

我 们 可 以 很 灵活 的 控制 卡片 的 显示 效果 ， 甚 至 实现 动画 效果 。 

卡片 一 般 放 在 页 面 项 部 ， 当 然 也 可 以 实现 左右 切换 的 功能 。 


<div class="card"> 
<div class="item item-text-wrap"> 
基本 卡片 ， 包 含 了 文本 信息 。 
«/div» 
«/div» 


卡片 (card) 默 认 样 式 带 有 box-shadow( 阴 影 )， 由 于 性 能 的 原因 ， 和 他 类 似 的 元 素 像 
list list-inset 并 没有 阴影 。 


A 每 个 卡片 都 有 很 多 子 元 素 ， 建 议 使 用 内 和 做 列表 (inset 
list) 。 


卡片 的 头 部 与 底部 
我 们 可 以 通过 添加 item-divider 类 为 卡片 添加 头 部 与 底部 : 


<div class="card"> 
<div class="item item-divider"> 
卡片 头 部 ! 
</div> 
<div class="item item-text-wrap"> 
基本 卡片 ， 包 含 了 文本 信息 。 
</div> 
<div class="item item-divider"> 
卡片 底部 ! 
«/div» 
«/div» 


卡片 列表 


使 用 list card 类 来 设置 卡片 列表 : 


«div class-"list card"> 


«a href="#" class="item item-icon-left"> 
<i class="icon ion-home"></i> 
Enter home address 

</a> 


<a href="#" class="item item-icon-left"> 
«i class="icon ion-ios-telephone"></i> 
Enter phone number 

</a> 


<a href="#" class="item item-icon-left"> 
<i class="icon ion-wifi"></i> 
Enter wireless password 

</a> 


<a href="#" class="item item-icon-left"> 
<i class="icon ion-card"></i> 
Enter card information 

</a> 


</div> 


带 图 片 卡片 
卡片 中 使 用 图 片 ， 效 果 会 更 好 ， 实 例如 下 : 


«div class-"list card"> 


«div class="item item-avatar"-» 
«img src="avatar.jpg"> 
<h2>Pretty Hate Machine</h2> 
<p>Nine Inch Nails</p> 

</div> 


<div class="item item-image"> 
«img src="cover.jpg"> 
</div> 


<a class="item item-icon-left assertive" href="#"> 
<i class="icon ion-music-note"></i> 
Start listening 

</a> 


</div> 


卡片 


NIV) Pretty Hate Machine 


Nine Inch Nails 





fi Start listening 


卡片 展现 


以 下 实例 中 使 用 几 种 不 同 的 选项 的 卡片 展现 方式 。 开始 使 用 了 list card 元 素 ， 并 使 
用 了 item-avatar , item-body 元 素 用 于 展示 图 片 和 文本 信息 ， 底 部 使 用 item-divider 
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«div class-"list card"> 


«div class="item item-avatar'» 
«img src="mcfly.jpg"> 
<h2>Marty McFly</h2> 
<p>November 05, 1955</p> 

</div> 


<div class="item item-body"> 
«img class-"full-image" src="delorean.jpg"> 
«p» 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 新 梦想 «br» 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 新 梦想 ! <br> 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 新 梦想 ! <br> 
菜 乌 教程 - - 学 的 不 仅 是 技术 ， 更 新 梦想 
</p> 
<p> 
<a href="#" class-"subdued"»1 喜欢 </a> 
«a href="#" class="subdued">5 评论 </a> 
</p> 
</div> 


<div class="item tabs tabs-secondary tabs-icon-left"> 
<a class="tab-item" href="#"> 
<i class="icon ion-thumbsup"></i> 
喜欢 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-chatbox"></i> 
Comment 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-share"></i> 
25 
</a> 
</div> 


</div> 


FR 


- Marty McFly 
November 05, 1955 
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ionic 表单 和 输入 框 
list 类 同样 可 以 用 于 input 元 素 。item-input 和 item 类 指定 了 文本 框 及 其 标签 


输入 框 属性 : placeholder 


以 下 实例 中 ， 默 认为 100% 宽 度 (左右 两 侧 没有 边框 ) ， 并 使 用 placeholder 属性 设 
置 输 入 字段 预期 值 的 提示 信息 。 


«div class="list"> 
«label class="item item-input"> 
<input type="text" placeholder="First Name"> 
</label> 
<label class="item item-input"> 
<input type="text" placeholder="Last Name"> 
</label> 
<label class="item item-input"> 
<textarea placeholder="Comments"></textarea> 
</label> 
</div> 


输入 框 属性 : input-label 
使 用 input-label 将 标签 放置 于 输入 框 input 的 左 侧 。 


«div class="list"> 
«label class="item item-input"> 
«span class-"input-label"»F P4: </span> 
«input type="text"> 
</label> 
<label class="item item-input"> 
«span class="input-label">243 : </span> 
<input type="password"> 
</label> 
</div> 
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HE d pan 2 a LT 48 A ERU ERI, 每 个 选项 使 用 item-stacked-label 类 指定 。 每 个 
输入 框 需要 指定 input-label。 以 下 实例 也 使 用 了 placeholder 属性 来 设置 信息 输入 
提示 。 


«div class="list"> 

«label class="item item-input item-stacked-label"> 
<span class="input-label">First Name</span> 
<input type="text" placeholder="John"> 

«/label» 

«label class="item item-input item-stacked-label"> 
«span class="input-label">Last Name</span> 
<input type="text" placeholder="Suhr"> 

</label> 

<label class="item item-input item-stacked-label"> 
«span class="input -label">Email</span> 
<input type="text" placeholder="john@suhr .com"> 

</label> 

</div> 


浮动 标签 


浮动 标签 类 似 于 堆 重 标签 ， 但 浮动 标签 有 一 个 动画 的 效果 ， 每 个 选项 需要 指定 
item-floating-label 类 ， 输 入 标签 需要 指定 input-label。 


«div class="list"> 
«label class="item item-input item-floating-label"> 
<span class="input-label">First Name</span> 
<input type="text" placeholder="First Name"> 
</label> 
«label class="item item-input item-floating-label"> 
<span class="input-label">Last Name</span> 
<input type="text" placeholder="Last Name"> 
</label> 
«label class="item item-input item-floating-label"> 
<span class="input -label">Email</span> 
<input type="text" placeholder="Email"> 
«/label» 
«/div» 


VJ Rz 3 


默认 情况 下 每 个 输入 域 宽度 都 是 100%， 但 我 们 可 以 使 用 list list-inset & card 类 设 
置 表单 的 内 边 距 (padding)， card 类 带 有 阴影 。 


«div class="list list-inset"> 
<label class="item item-input"> 
<input type="text" placeholder="First Name"> 
</label> 
<label class="item item-input"> 
<input type="text" placeholder="Last Name"> 
</label> 
</div> 


A BR Ej A say 
使 用 list-inset 4 BARR Sz sz, 使 用 item-input-inset #20 n] EAPJER— T Riz. 


<div class="list"> 


<div class="item item-input-inset"> 
«label class="item-input-wrapper"> 
<input type="text" placeholder="Email"> 
</label> 
«button class="button button-small"> 
Submit 
«/button» 
«/div» 


«/div» 


带 图 标的 输入 框 
item-input 输入 框 可 以 很 简单 的 添加 图 标 。 图 标 可 以 在 «input» 前 添加 。 


«div class="list list-inset"> 
<label class="item item-input"> 
<i class="icon ion-search placeholder -icon"></i> 
<input type="text" placeholder="Search"> 
</label> 
</div> 


头 部 输入 杠 


输入 框 可 放置 在 头 部 ， 并 可 添加 提交 或 取消 按钮 。 


«div class="bar bar-header item-input-inset"> 
«label class="item-input-wrapper'"> 
«i class="icon ion-ios-search placeholder -icon"></i> 
<input type="search" placeholder=" 搜 索 "> 
</label> 
«button class="button button-clear"> 
取消 
«/button» 
«/div» 


ionic Toggle( 切 换 开 关 ) 


切换 开关 类 似 与 HTML 的 checkbox 标签 ， 但 它 更 易于 在 移动 设备 上 使 用 。 
切换 开关 可 以 使 用 toggle-assertive 来 指定 颜色 。 


«label class="toggle"> 
«input type="checkbox"> 
«div class="track"> 
«div class="handle"></div> 
«/div» 
</label> 


该 实例 有 是 多 个 切换 开关 列表 。 注 意 ， 每 个 选项 的 item 类 后 需要 添加 item-toggle 


Fo 


<ul class="list"> 


<li class="item item-toggle"> 
HTML5 
«label class-"toggle toggle-assertive"> 
«input type="checkbox"> 
«div class="track"> 
«div class="handle"></div> 
«/div» 
</label> 
</li> 


</ul> 


uU 
M 
上 


ARAU TF : 
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dl 


切换 


Flashplayer 


Java Applets 


JavaScript q ) 


Silverlight 


Web Components C 


ionic checkbox ( 复 选 框 ) 


ionic 里 面 的 Checkbox 和 普通 的 Checkbox 效果 上 其 实 相差 不 大 ， 只 是 样式 上 有 所 
不 同 。 


以 下 实例 颜色 了 多 个 复 选 框 的 列表 。 


S 


注意 ， 每 个 选项 的 item 类 后 需要 添加 item-checkbox 类 。 
复 选 框 可 以 使 用 checkbox-assertive 来 指定 颜色 。 


«ul class="list"> 


«li class="item item-checkbox"> 
<label class="checkbox"> 
<input type="checkbox"> 
</label> 
Flux Capacitor 
</li> 


</ul> 


上 


4 


ARAF : 


(8i 
dl 
v 
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复 选 框 


Flux Capacitor 


1.21 Gigawatts 


Delorean 


88 MPH 


Plutonium Resupply 
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ionic 单 选 框 


ionic 当选 按钮 与 标准 type="radio" 的 input 元 素 类 似 。 以 下 展示 了 现代 app 类 型 的 
单 选 按钮 。 


每 个 item-radio 中 的 type="radio" 的 input 元 素 的 name 属性 都 相同 。radio-icon 
类 用 于 是 否 显示 图 标 。 


ionic 在 单 选 项 中 使 用 了 <label> 元 素 ， 使 其 更 易 点 击 。 
实例 


«div class="list"> 


«label class="item item-radio"> 
<input type="radio" name-"group" value="go" checked="checked"> 
<div class="item-content"> 
Go 
</div> 
<i class="radio-icon ion-checkmark"></i> 
</label> 


<label class="item item-radio"> 
<input type="radio" name="group" value="python"> 
<div class="item-content"> 
Python 
</div> 
<i class="radio-icon ion-checkmark"></i> 
</label> 


<label class="item item-radio"> 
<input type="radio" name="group" value="ruby"> 
<div class="item-content"> 
Ruby 
</div> 
<i class="radio-icon ion-checkmark"></i> 
</label> 


«label class="item item-radio"> 
<input type="radio" name="group" value=".net"> 
<div class="item-content"> 
.Net 
«/div» 
«i class="radio-icon ion-checkmark"></i> 
</label> 


<label class="item item-radio"> 
<input type="radio" name="group" value="java"> 


«div class="item-content"> 
Java 
«/div» 
«i class="radio-icon ion-checkmark"></i> 
</label> 


<label class="item item-radio"> 
<input type="radio" name="group" value="php"> 
<div class="item-content"> 
PHP 
</div> 


<i class="radio-icon ion-checkmark"></i> 
</label> 


</div> 


运行 效果 如 下 : 
单 选 按钮 列表 


Python 
Ruby 
.Net 
Java 


PHP 


Ionic Range 


ionic Range 是 一 个 滑 块 控件 ，ionic 为 Range 提供 了 很 多 种 默认 的 样式 。 而 且 你 可 
以 在 许多 种 元 素 里 使 用 它 比 如 列表 或 者 Card 。 


实例 


«div class="range"> 
«i class-"icon ion-volume-low"></i> 
«input type-"range" name="volume"> 
«i class="icon ion-volume-high"»«/i» 
«/div» 


«div class-"list" style="margin-top: 13px"> 

«div class="item item-divider"> 
Ranges In A List 

</div> 

<div class="item range range-positive"> 
<i class="icon ion-ios-sunny-outline"></i> 
<input type-"range" name="volume" min="0" max="100" value="12"> 
<i class="icon ion-ios-sunny"></i> 

</div> 

<div class="item range range-calm"> 
<i class="icon ion-ios-lightbulb-outline"></i> 
<input type="range" name="volume" min="0" max="100" value="25": 
«i class="icon ion-ios-lightbulb"></i> 

</div> 

<div class="item range range-balanced"> 
<i class="icon ion-ios-bolt-outline"></i> 
<input type-"range" name="volume" min="0" max="100" value="38"> 
«i class="icon ion-ios-bolt"></i> 

</div> 

<div class="item range range-energized"> 
<i class="icon ion-ios-moon-outline"></i> 
<input type-"range" name="volume" min="0" max="100" value="50"> 
«i class="icon ion-ios-moon"></i> 

</div> 

<div class="item range range-assertive"> 
«i class="icon ion-ios-partlysunny-outline"></i> 
<input type-"range" name="volume" min="0" max="100" value="63"> 
<i class="icon ion-ios-partlysunny"></i> 

</div> 

<div class="item range range-royal"> 
<i class="icon ion-ios-rainy-outline"></i> 
<input type-"range" name="volume" min="0" max="100" value="75"> 
<i class="icon ion-ios-rainy"></i> 

</div> 

<div class="item range range-dark"> 
<i class="icon ion-ios-lightbulb-outline"></i> 
<input type="range" name="volume" min="0" max="100" value="88"> 
«i class="icon ion-ios-lightbulb"></i> 

</div> 
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2" 


Ranges In A List 


ionic Range 


»()) 
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ionic select 


ionic select 的 select 相 比 原生 的 要 更 加 美观 些 。 但 是 弹出 的 可 选 选项 样式 是 浏览 器 
默认 的 。 


每 个 平台 上 的 可 选项 样式 都 是 不 一 样 的 ， 在 PC 电脑 的 浏览 器 上 ， 你 会 看 到 传统 的 下 
拉 界 面 ，Android 上 会 弹出 单 选 按钮 选项 ，iOS 有 个 滚轮 操作 界面 。 


实例 


«div class="list"> <div class="item item-input item-select"> <( 


[ag] tente 





运行 效果 如 下 : 
Select 
Lightsaber Green 
Fighter X-wina 
Droid R2-D2 


Planet Daaohah 


ionic tab( 选 项 卡 ) 


ionic tab( 选 项 卡 ) 是 水 平 排列 的 按钮 或 者 链接 ， 用 以 页 面 间 导 航 的 切换 。 它 可 以 包 
含 文字 和 图 标的 组 合 ， 是 一 种 移动 设备 上 流行 的 导航 方法 。 


以 下 选项 卡 容器 使 用 了 tabs 类 ， 每 个 选项 卡 使 用 tab-item 类 。 上 默认 情 况 下 ， 选 项 
卡 是 文本 的 ， 并 没有 图 标 。 


实例 


«div class="tabs"> 
«a class="tab-item"> 
主页 
</a> 
<a class="tab-item"> 
收藏 
</a> 
«a class="tab-item"> 
设置 
</a> 
«/div» 


默认 情况 ， 选 项 卡 颜色 为 默认 ， 你 可 以 设置 以 下 不 同 颜色 样式 : tabs-default , 
tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs- 
energized , tabs-assertive ，tabs-royal ，tabs-dark。 


要 隐藏 选项 卡 栏 ， 可 使 用 tabs-item-hide 类 。 


图 标 选 项 卡 


在 tabs 类 后 添加 tabs-icon-only 类 可 设置 只 显示 图 标 选 项 卡 。 


«div class="tabs tabs-icon-only"> 
<a class="tab-item"> 
<i class="icon ion-home"></i> 
</a> 
<a class="tab-item"> 
<i class="icon ion-star"></i> 
</a> 
<a class="tab-item"> 
«i class="icon ion-gear-a"></i> 
</a> 
</div> 


顶部 图 标 + 文 字 选 项 卡 


在 tabs 类 后 添加 ttabs-icon-top 类 可 设置 顶部 图 标 + 文 字 选 项 卡 。 


«div class="tabs tabs-icon-top"> 
<a class="tab-item" href="#"> 
<i class="icon ion-home"></i> 
主页 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-star"></i> 
收藏 
</a> 
<a class="tab-item" href="#"> 
«i class="icon ion-gear-a"></i> 
设置 
</a> 
</div> 


左 侧 图 标 + 文 字 选 项 卡 


在 tabs 类 后 添加 ttabs-icon-left 类 可 设置 左 侧 图 标 + 文 字 选 项 卡 。 


«div class="tabs tabs-icon-left"> 
<a class="tab-item"> 
<i class="icon ion-home"></i> 
主页 
</a> 
«a class="tab-item"> 
«i class="icon ion-star"></i> 
收藏 
</a> 
«a class="tab-item"> 
«i class="icon ion-gear-a"></i> 
设置 
</a> 
«/div» 


条 纹样 式 选 项 卡 
可 以 在 带 有 tabs 的 样式 名 的 元 素 上 添加 tabs-striped 来 实现 像 Android 风格 的 
tabs。 也 可 以 添加 tabs-top 来 实现 选项 卡 在 页 面 顶 部 。 


条 纹 选 项 卡 颜色 可 通过 tabs-background-(color) 和 tabs-color-{color} 来 控制 ， 
{color} 值 可 以 是 : default, light, stable, positive, calm, balanced, energized, 
assertive, royal, 或 dark. 


注意 : 如 果 要 再 选项 卡 上 设置 头 部 标题 ， 需 要 使 用 has-tabs-top 类 。 


«div class-"tabs-striped tabs-top tabs-background-positive tabs-co- 
«div class="tabs"> 
<a class-'"tab-item active" href="#"> 
«i class="icon ion-home"></i> 
Test 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-star"></i> 
Favorites 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-gear-a"></i> 
Settings 
</a> 
</div> 
</div> 
<div class="tabs-striped tabs-color-assertive"> 
<div class="tabs"> 
<a class="tab-item active" href="#"> 
<i class="icon ion-home"></i> 
Test 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-star"></i> 
Favorites 
</a> 
<a class="tab-item" href="#"> 
«i class="icon ion-gear-a"></i> 
Settings 
</a> 
</div> 
</div> 





运行 效果 如 下 : 
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ionic 网 格 (Grid) 


ionic 的 网 格 (Grid) 和 其 他 大 部 分 框架 有 所 不 同 ， 它 采用 了 弹性 金子 模型 (Flexible 
Box Model) 。 而 且 在 移动 端 ， 基 本 上 的 手机 都 支持 。row 样式 指定 行 ，col 样式 指 
定 列 。 


同等 大 小 网 格 
在 带 有 row 的 样式 的 元 素 里 如 果 包 含 了 col 的 样式 ，col 就 会 设置 为 同等 大 小 。 
以 下 实例 中 row 的 样式 包含 了 5 个 col 样式 ， 每 个 col 的 宽度 为 20%。 


<div class="row"> 
«div class="col">.col</div> 
«div class="col">.col</div> 
«div class="col">.col</div> 
«div class="col">.col</div> 
«div class="col">.col</div> 
«/div» 


指定 列 宽 


你 可 以 设 定 一 行 中 各 个 列 的 大 小 不 一 样 。 默 认 情 况 下 ， 列 都 会 被 划分 为 同等 大 小 。 
但 你 也 可 以 按 百分比 来 设置 列 的 宽度 (一 行为 12 个 网 格 ) 。 


«div class="row"> 
«div class="col col-50">.col.col-50</div> 
<div class="col">.col</div> 
<div class="col">.col</div> 

</div> 


«div class="row"> 
<div class="col col-75">.col.col-75</div> 
<div class="col">.col</div> 

</div> 


«div class="row"> 

<div class="col">.col</div> 

<div class="col col-75">.col.col-75</div> 
</div> 


<div class="row"> 
<div class="col">.col</div> 
<div class="col">.col</div> 
</div> 


注意 : 实例 中 ， 每 个 col 样式 会 自动 添加 上 边框 和 灰色 背景 。 
下 面 列 出 了 指定 列 宽 的 一 些 百分比 的 样式 名 : 


.col-10 10% 
.col-20 20% 
.col-25 25% 
.col-33 33.3333% 
.col-50 50% 
.col-67 66.6666% 
.col-75 75% 
.col-80 80% 
.col-90 90% 
有 偏 移 量 的 网 格 


列 可 以 设置 左 侧 偏 移 量 ， 实 例如 下 : 


<div class="row"> 
«div class="col col-33 col-offset-33">.col</div> 
«div class="col">.col</div> 

«/div» 


«div class="row"> 

«div class="col col-33">.col</div> 

<div class="col col-33 col-offset-33">.col</div> 
</div> 


«div class="row"> 


<div class="col col-33 col-offset-67">.col</div> 
</div> 


下 面 是 一 些 百分比 的 偏 移 量 样式 名 : 


.col-offset-10 10% 


.col-offset-20 20% 
.col-offset-25 25% 
.col-offset-33 33.3333% 
.col-offset-50 50% 
.col-offset-67 66.6666% 
.col-offset-75 75% 
.col-offset-80 80% 
.col-offset-90 90% 
纵向 对 齐 网 格 


弹性 盒子 模型 可 以 很 容易 设置 列 纵 向 对 齐 。 纵 向 对 齐 包含 顶部 ， 中 间 部 分 ， 底 部 ， 
可 以 应 用 到 每 一 行 的 列 ， 或 者 指定 的 某 列 。 


实例 中 ， 最 后 一 列 设置 了 最 高 的 内 容 用 于 更 好 的 演示 纵向 对 齐 网 格 。 


«div class="row"> 

«div class="col">.col</div> 

«div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">1<br>2<br>3<br>4</div> 
</div> 


<div class="row"> 
<div class="col col-top">.col</div> 
<div class="col col-center">.col</div> 
<div class="col col-bottom">.col</div> 
<div class="col">1<br>2<br>3<br>4</div> 
</div> 


<div class="row row-top"> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">1<br>2<br>3<br>4</div> 
</div> 


«div class="row row-center"> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">1<br>2<br>3<br>4</div> 
</div> 


<div class="row row-bottom"> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">.col</div> 

<div class="col">1<br>2<br>3<br>4</div> 
</div> 


响应 陈 网 格 


手持 设备 屏幕 在 切换 时 ， 例 如 横 屏 ， 坚 屏 等 。 就 需要 设置 每 行 的 网 格 可 以 实现 根据 
不 同 宽度 自 适 应 大 小 。 


不 同 设备 响应 式 类 的 样式 如 下 : 


Br 
EH 


响应 式 类 
.responsive-sm 小 于 手机 横 屏 
.responsive-md 小 于 平板 坚 屏 
.responsive-lg 小 于 平板 横 屏 


«div class="row responsive-sm"> 
<div class="col">.col</div> 
<div class="col">.col</div> 
<div class="col">.col</div> 
<div class="col">.col</div> 

</div> 


ionic 颜色 
ionic 提供 了 很 多 颜色 的 配置 ， 当 然 你 可 以 根据 自己 的 需要 自 定 义 颜色 。 


«ul class-"list color-list-demo"» 
<li class-"item dark"> 


light 

<span class="color-demo light-bg light-border"></span> 
</1i> 
«li class-"item stable-dark"> 

stable 

<span class="color-demo stable-bg stable-border"></span> 
</li> 
<li class="item positive"> 

positive 

<span class="color-demo positive-bg positive-border"></span> 
</li> 
<li class-"item calm"> 

calm 

<span class="color-demo calm-bg calm-border"></span> 
</li> 
<li class="item balanced"> 

balanced 

«span class="color-demo balanced-bg balanced-border"></span> 
</li> 
<li class="item energized"> 

energized 

<span class="color-demo energized-bg energized-border"></spar 
</li> 
<li class="item assertive"> 

assertive 

«span class="color-demo assertive-bg assertive-border"></spar 
</li> 
<li class="item royal"> 

royal 

<span class="color-demo royal-bg royal-border"></span> 
</li> 
<li class="item dark"> 

dark 


<span class="color-demo dark-bg dark-border"></span> 
</li> 
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light 
stable 
positive 


calm 


assertive 


royal 


dark 
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ionic icon( 图 标 ) 
ionic 也 默认 提供 了 许多 的 图 标 ， 大 概 有 500 多 个 。 用 法 也 非常 的 简单 : 


«i class-"icon icon ion-star"></i> 


图 标 样式 CDN 地 
HE : http://www.runoob.com/static/ionic/css/ionicons.min.css. 


图 标 列表 如 下 : 


ionic JavaScript 


ionic 上 拉 菜 单 (ActionSheet) 


上 拉 菜 单 (ActionSheet) 通 过 往 上 漳 出 的 框 ， 来 让 用 户 选择 选项 。 


非常 危险 的 选项 会 以 高 亮 的 红色 来 让 人 第 一 时 间 识 别 。 你 可 以 通过 点 击 取消 按钮 或 
者 点 击 空 白 的 地 方 来 让 它 消失 。 


实例 
HTML 代码 


«body ng-app="starter" ng-controller="actionsheetCtl" > 


<ion-pane> 
<ion-content > 
<h2 ng-click="show()">Action Sheet</h2> 
</ion-content> 
</ion-pane> 
</body> 


JavaScript 代码 


在 代码 中 触发 上 拉 菜 单 ， 需 要 在 你 的 angular 控制 器 中 使 用 $ionicActionSheet Ak 
务 : 


angular.module('starter', ['ionic']) 


.run(function($ionicPlatform) ( 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the : 
// for form inputs) 
if(window.cordova && window.cordova.plugins.Keyboard) ( 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
} 


if(window.StatusBar) { 
StatusBar.styleDefault(); 
} 


+); 
}) 


.controller( 'actionsheetCtl',['$scope','$ionicActionSheet', '$timec 
$scope.show = function() { 


var hideSheet = $ionicActionSheet.show(1 
buttons: [ 
( text: '<b>Share</b> This' }, 
{ text: 'Move' } 
], 
destructiveText: 'Delete', 
titleText: 'Modify your album', 
cancelText: 'Cancel', 
cancel: function() { 
// add cancel code.. 
tr 
buttonClicked: function(index) { 
return true; 
} 
3); 


$timeout(function() { 
hideSheet(); 
j, 2000); 





运行 效果 如 下 图 : 


ionic ez 


jl 


我 们 经 常 需要 在 UL, MEHE, DRE. Est Edu 
Es 


在 组 件 中 可 以 使 用 $ionicBackdrop.retain() 来 显示 背景 晨 ， 使 用 
$ionicBackdrop.release() 隐 藏 背景 层 。 


每 次 调用 retain 后 ， 背 景 会 一 直 显 示 ， 直 到 调用 release 消 除 背 景 层 
例 


HTML 代码 


q 


~ 


将 


«body ng-app="starter" ng-controller="actionsheetCtl" > 
<ion-pane> 
<ion-content > 
<h2 ng-click="action()">$ionicBackdrop</h2> 
</ion-content> 
</ion-pane> 
</body> 


JavaScript 代码 


angular.module('starter', ['ionic']) 


.run(function($ionicPlatform) ( 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the : 
// for form inputs) 
if(window.cordova && window.cordova.plugins.Keyboard) ( 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
} 


if(window.StatusBar) { 
StatusBar.styleDefault(); 
} 


+); 
}) 


.controller( 'actionsheetCtl',['$scope','$timeout' , '$ionicBackdroy 


$scope.action = function() { 
$ionicBackdrop.retain(); 
$timeout(function() { // 上 默认 让 它 1 秒 后 消失 
$ionicBackdrop.release(); 
j, 1000); 
3 





显示 效果 如 下 图 所 示 : 


$ionicBackdrop 





ionic T fuel 


在 加 载 新 数据 的 时 候 ， 我 们 需要 实现 下 拉 刷 新 效果 ， 代 码 如 下 : 


实例 
HTML 代码 


«body ng-app="starter" ng-controller="actionsheetCtl" > 
<ion-pane> 
<ion-content > 
«ion-refresher pulling-text=" 下 拉 刷 新 " on-refresh="doRef 
<ion-list> 
«ion-item ng-repeat-"item in items" ng-bind="item.1 
</ion-list> 
</ion-content> 
</ion-pane> 
</body> 





JavaScript 代码 


angular.module('starter', ['ionic']) 


.run(function($ionicPlatform) ( 
$ionicPlatform.ready(function() { 

// Hide the accessory bar by default (remove this to show the : 

// for form inputs) 

if(window.cordova && window.cordova.plugins.Keyboard) ( 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

} 

if(window.StatusBar) { 
StatusBar.styleDefault(); 

} 


1) 
3) 


.controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',functic 


$scope.items-[ 


{ 
"name":"HTML5" 
ty 
{ 
"name":"JavaScript" 
ty 
{ 
"name" :"Css3" 
} 


]; 


$scope.doRefresh = function() { 
$http.get('http://www.runoob.com/try/demo source/item.json 
.Success(function(newItems) { 
$scope.items - newItems; 
3) 
.finally(function() { 
$scope.$broadcast('scroll.refreshComplete'); 





item.json 文件 数据 : 


"name" : " 菜 乌 教程 " 
3 
{ 

"name": "www. runoob.com" 
} 


效果 如 下 所 示 : 


HTML5 


JavaScript 


一 
u 
UJ 


ionic 复 选 框 


ionic 复 选 框 (checkbox) 与 普通 的 HTML 复 选 框 没什么 区 别 ， 以 下 实例 演示 了 
ionic 复 选 框 ion-checkbox 的 应 用 。 


«ion-checkbox ng-model="isChecked">S ittE ts &</ion-checkbox> 


实例 


实例 中 ， 会 根据 复 选 框 是 否 选 中 ， 修 改 checked 值 ，true 为 选中 ， false 为 未 选 


o 


HTML 代码 


«ion-header-bar class="bar-positive"> 
«h1 class="title">S xt fE«/h1» 
«/ion-header-bar» 


«ion-content» 
«div class="list"> 


«ion-checkbox ng-repeat-"item in devList" 
ng-model="item.checked" 
ng-checked="item.checked"> 

{{ item.text }} 
</ion-checkbox> 


«div class="item"> 
<div ng-bind="devList | json"></div> 
</div> 


<div class="item item-divider"> 
Notifications 
</div> 


<ion-checkbox ng-model="pushNotification.checked" 
ng - change="pushNotificationChange()"> 
Push Notifications 
</ion-checkbox> 


<div class="item"> 
<div ng-bind="pushNotification | json"></div> 
</div> 


<ion-checkbox ng-model="emailNotification" 
ng-true-value="'Subscribed'" 
ng-false-value="'Unubscribed'"> 
Newsletter 
</ion-checkbox> 
<div class="item"> 
<div ng-bind="emailNotification | json"></div> 
</div> 


</div> 


</ion-content> 


JavaScript 代码 


angular.module('starter', ['ionic']) 


.run(function($ionicPlatform) ( 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the ac« 
// for form inputs) 
if(window.cordova && window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
} 
if(window.StatusBar) { 
StatusBar.styleDefault(); 
} 
3): 
3) 


.controller( 'actionsheetCtl',['$scope',function($scope)( 


$scope.devList - [ 
{ text: "HTML5", checked: true }, 
{ text: "CSS3", checked: false }, 
{ text: "JavaScript", checked: false } 
]; 


$scope.pushNotificationChange = function() { 
console.log('Push Notification Change', $scope.pushNotificat: 


}; 


$scope.pushNotification = { checked: true }; 
$scope.emailNotification = 'Subscribed'; 





css 代码 : 


body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 





效果 如 下 所 示 : 
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JavaScript 


"tert HMS 
"checked": true 


"BED sod 
"checked": false 
1 
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ionic 单 选 框 操作 
实例 中 ， 根 据 选中 的 不 同 选项 ， 显 示 不 同 的 值 。 


HTML 代码 


«ion-header-bar class="bar-positive"> 
<h1 clLass='"title"> 当 选 按钮 </h1> 
«/ion-header-bar» 


«ion-content» 
«div class="list"> 


«div class="item item-divider"> 
选取 的 值 为 : {{ data.clientSide }} 
</div> 


<ion-radio ng-repeat="item in clientSideList" 
ng-value="item.value" 
ng-model="data.clientSide"> 
{{ item.text }} 
</ion-radio> 


<div class="item item-divider"> 


Serverside, Selected Value: {{ data.serverSide }} 


</div> 


<ion-radio ng-repeat="item in serverSideList" 
ng-value="item. value" 
ng-model="data.serverSide" 
ng -change="SserverSideChange(item)" 
name="Server-side"> 
{{ item.text }} 
</ion-radio> 


</div> 


</ion-content> 


JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('MainCtrl', function($scope) { 


$scope.clientSideList = [ 
{ text: "Backbone", value: "bb" }, 
{ text: "Angular", value: "ng" }, 
{ text: "Ember", value: "em" }, 
{ text: "Knockout", value: "ko" } 


1; 


$scope.serverSideList = [ 
{ text: "Go", value: "go" }, 
{ text: "Python", value: "py" }, 
t text: "Ruby", value: "rb" }, 
{ text: "Java", value: "jv" } 


]; 


$scope.data = { 
clientSide: 'ng' 


J; 


$scope.serverSideChange = function(item) { 
console.log("Selected Serverside, text:", item.text, "value:", 


了 





css 代码 : 


body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 


} 
a: ý Ok 


效果 如 下 所 示 : 
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当选 按钮 





Backbone 
Angular ^ 
Ember 


Knockout 
Serverside, Selected Value: 


Go 


Python 
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ionic 切换 开 天 操 作 


以 下 实例 中 ， 通 过 切换 不 同 开关 checked 显示 不 同 的 值 ，true 为 打开 ，false 为 天 
Ao 


HTML 代码 


<ion-header -bar class="bar-positive"> 
«hi class="tit1e"> 开 关切 换 </h1> 
«/ion-header-bar» 


«ion-content» 
«div class="list"> 


«div class="item item-divider"> 
Settings 
</div> 


<ion-toggle ng-repeat="item in settingsList" 
ng-model="item.checked" 
ng-checked="item.checked"> 
{{ item.text }} 
</ion-toggle> 


<div class="item"> 
<!-- 使 用 pre 标签 展示 效果 更 美观 --> 
<div ng-bind="settingsList | json"></div> 
</div> 


<div class="item item-divider"> 
Notifications 
</div> 


<ion-toggle ng-model="pushNotification.checked" 
ng-change-"pushNotificationChange()"» 
Push Notifications 
</ion-toggle> 


<div class="item"> 
<!-- 使 用 pre 标签 展示 效果 更 美观 --> 
<div ng-bind="pushNotification | json"></div> 
</div> 


<ion-toggle toggle-class="toggle-assertive" 
ng-model="emailNotification" 
ng-true-value="Subscribed" 
ng-false-value="Unubscribed"> 


Newsletter 
</ion-toggle> 


<div class="item"> 
<!-- 使 用 pre 标签 展示 效果 更 美观 --> 
«div ng-bind="emailNotification | json"></div> 
«/div» 


«/div» 


«/ion-content» 


由 于 pre 标 签 冲突 ， 实 例 中 的 pre 已 替换 为 div 标 签 ， 具 体 可 以 在 "尝试 一 下 "中 查 


o 


JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('MainCtrl', function($scope) { 


$scope.settingsList = [ 
{ text: "Wireless", checked: true }, 
{ text: "GPS", checked: false }, 
{ text: "Bluetooth", checked: false } 


1; 


$scope.pushNotificationChange = function() { 
console.log('Push Notification Change', $scope.pushNotificatior 


HH 


$scope.pushNotification = ( checked: true }; 
$scope.emailNotification - 'Subscribed'; 


}); 
cc 
css 代码 : 





body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 


} 
E ny 


效果 如 下 所 示 : 
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Settings 


Wireless 





GPS 


Bluetooth 


«^ 
* 
* 


[ 
{ 
"text": “Wireless”, 
“checked”: true 
hy 
[ 


"text" : "GPS", 
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ionic 手势 事件 
on-hold : 长 按 的 时 间 是 500 上 毫秒 。 


&lt;button 
on-hold="onHold()" 
class="button"&gt; 
Test 
&lt;/button&gt; 


on-tap : 这 个 是 手势 轻 击 事件 ， 如 果 长 按时 间 超 过 250 毫 秒 ， 那 就 不 是 轻 击 
Ta o 


&lt;button 
on-tap="onTap()" 
class="button"&gt; 
Test 
&lt;/button&gt; 


on-double-tap : 手 双 击 屏 幕 事件 


&lt;button 
on-double-tap="onDoubleTap()" 
class="button"&gt; 

Test 
&lt;/button&gt; 


on-touch : 这 个 和 on-tap 还 是 有 区 别 的 ， 这 个 是 立即 执行 ， 而 且 是 用 户 点 击 立 
马 执 行 。 不 用 等 待 touchend/mouseup 。 


&lt;button on-touch="onTouch()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-release : 当 用 户 结束 触摸 事件 时 触发 。 


&lt;button 
on-release-"onRelease()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-drag 


动 ， 都 会 触发 on-drag。 


&lt;button 
on-drag="onDrag()" 
class="button"&gt; 
Test 

&lt;/button&gt; 


: 向 上 拖 搜 。 


on-drag-up 


&lt;button 
on-drag-up="onDragUp()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


: 向 右 拖 搜 。 


on-drag-right 


&lt;button 
on-drag-right-"onDragRight()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


: 向 下 拖 搜 。 


on-drag-down 


&lt;button 
on-drag-downz"onDragDown( )" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-drag-left :向 左边 拖 搜 。 


&lt;button 
on-drag-left="onDragLeft()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-swipe : 指 手指 滑动 效果 ， 可 以 是 任何 方向 上 的 。 
有 四 个 方向 上 单独 的 事件 。 


: 这 个 有 点 类 似 于 PC 端的 拖 搜 。 当 你 一 直 点 击 某 个 物体 ， 并 且 手 开始 移 


而 且 也 和 on-drag 类 似 ， 都 


&lt;button 
on-swipe-"onSwipe()" 
class="button"&gt; 
Test 

&lt;/button&gt; 


on-swipe-up : 向 上 的 手指 滑动 效果 。 


&lt;button 
on-swipe-up-"onSwipeUp()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-swipe-right : 向 右 的 手指 滑动 效果 。 


&lt;button 
on-swipe-right-"onSwipeRight()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-swipe-down : 向 下 的 手指 滑动 效果 。 


&lt;button 
on-swipe-down-z"onSwipeDown()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


on-swipe-left : 向 左 的 手指 滑动 效果 。 


&lt;button 
on-swipe-left-"onSwipeLeft()" 
class="button"&gt; 

Test 

&lt;/button&gt; 


$ionicGesture 


一 个 angular 服 务 展示 ionicionic.EventController 手 势 。 


方法 
on(eventType, callback, $element) 


在 一 个 元 素 上 添加 一 个 事件 监听 器 。 


eventType : string 
监听 的 手势 事件 。 
callback : function(e) 
当 手 势 事件 发 生 时 触发 的 事件 。 
$element : element 
angular 元 素 监 听 的 事件 。 
options : object 
对 象 。 


off(eventType, callback, $element) 


在 一 个 元 素 上 移 除 一 个 手势 事件 监听 器 。 


eventType : string 

移 除 监 听 的 手势 事件 。 
callback : function(e) 
移 除 监听 器 。 

$element : element 


被 监听 事件 的 angular 元 素 。 


ionic 头 部 和 压 部 


ion-header-bar 


这 个 是 固定 在 屏幕 顶部 的 一 个 头 部 标题 栏 。 如 果 给 它 加 上 'bar-subheader 这 个 祥 
式 ， 它 就 是 副标题 。 


用 法 


«ion-header-bar align-title-"left" class="bar-positive"> 
«div class="buttons"> 
«button class="button" ng-click="doSomething()">Left Button</bt 
</div> 
«hi class="title">Title!</h1i> 
<div class="buttons"> 
<button class="button">Right Button</button> 
</div> 
«/ion-header-bar» 
<ion-content> 
Some content! 
</ion-content> 





API 
align-title (optional) : string 


这 个 是 对 齐 title 的 。 如 果 没 有 设置 ， 它 将 会 按照 手机 的 默认 排版 (los 的 默认 是 居 
中 ，Android 默 认 是 居 左 )。 它 的 值 可 以 是 '|left','center','right'。 


no-tap-scroll (optional)  : boolean 


这 个 是 设置 header-bar 是 否 跟随 着 内 容 的 滚动 而 滚动 ， 就 是 是 否 固定 在 顶部 。 它 
的 值 是 布尔 值 (true/false) 。 


ion-footer-bar 


知道 了 ion-header-bar ， 理 解 jon-footer-bar 就 轻松 多 啦 ! 只 是 ion-footer-bar 是 在 


屏幕 的 底部 。 


用 法 


«ion-content» 
Some content! 
</ion-content> 
«ion-footer-bar align-title-"left" class="bar-assertive"> 
«div class="buttons"> 
«button class="button">Left Button</button> 
</div> 
<h1 class="title">Title!</h1> 
«div class="buttons" ng-click="doSomething()"> 
<button class="button">Right Button</button> 
</div> 
</ion-footer -bar> 


API 


与 ion-header-bar 不 同 的 是 ，ion-footer-bar 只 有 align-title 这 个 API. 
align-title(optional) : string 


这 个 是 对 齐 tite 的 。 如 果 没 有 设置 ， 它 将 会 按照 手机 的 默认 排版 (los 的 默认 是 居 
中 ，Android 默 认 是 居 左 )。 它 的 值 可 以 是 'left','center','right'。 


ionic 列表 操作 


列表 是 一 个 应 用 广泛 在 几乎 所 有 移动 app 中 的 界面 元 素 。ionList 和 ionltem 这 两 个 
[eee 比如 移 除 其 中 的 某 一 项 ， 拖 动 重新 排序 ， 滑 动 编 
辑 o 


用 法 


<ion-list> 
<ion-item ng-repeat="item in items"> 
Hello, {{item}}! 
</ion-item> 
</ion-list> 


高 级 用 法 : 缩 略 图， 删除 按钮 ， 重 新 排序 ， 滑 动 


«ion-list ng-controller-z"MyCtrl" 
show-delete="shouldShowDelete" 
show-reorderz"shouldShowReorder" 
can-swipe="1istCanSwipe"> 

<ion-item ng-repeat="item in items" 
class="item-thumbnail-left"> 


«img ng-src="{{item. img}}"> 
<h2>{{item. title}}</h2> 
<p>{{item.description}}</p> 
<ion-option-button class="button-positive" 
ng-click-"share(item)"- 
分 享 
</ion-option-button> 
<ion-option-button class="button-info" 
ng-click="edit(item)"> 
编辑 
</ion-option-button> 
<ion-delete-button class="ion-minus-circled" 
ng-click="items.splice($index, 1)"> 
</ion-delete-button> 
«ion-reorder-button class="ion-navicon" 
on-reorder="reorderItem(item, $fromIndex, £ 
«/ion-reorder-button» 


«/ion-item» 
«/ion-list» 


«| BB 











API 

delegate-handle("]it) : 字符 串 

该 句柄 定义 带 有 $ionicListDelegate 的 列表 。 
show-delete( 可 选 ) : 布尔 值 

列表 项 的 删除 按钮 当前 是 显示 还 是 隐藏 。 


RO 


show-reorder( 可 选 ) : 布尔 值 
列表 项 的 排序 按钮 当前 是 
can-swipe( 可 选 ) : 布尔 值 


列表 项 是 否 被 允许 滑动 显示 选项 按钮 。 默 认 : true. 


实例 
HTML 代码 : 


«html ng-app="ionicApp"> 
<head> 
«meta charset="utf-8"> 
«meta name="viewport" content="width=device-width, initial-sca_ 
<title>Ionic List Directive</title> 


«link href="http://www.runoob.com/static/ionic/css/ionic.min.cs 
«script src="http://www.runoob.com/static/ionic/js/ionic. bundle 
</head> 


«body ng-controller-'MyCtrl"» 


«ion-header-bar class="bar-positive"> 
«div class="buttons"> 
«button class-"button button-icon icon ion-ios-minus-outlir 
ng-click="data.showDelete = !data.showDelete; data.showRt 
</div> 
«hi class="title">Ionic Delete/Option Buttons</h1i> 
<div class="buttons"> 
«button class="button" ng-click="data.showDelete = false; ( 
Reorder 
«/button» 
«/div» 
«/ion-header-bar» 


«ion-content» 


<!-- The list directive is great, but be sure to also checkot 


«ion-list show-delete="data.showDelete" show-reorder="data.stł 


«ion-item ng-repeat-"item in items" 
item="item" 
href="#/item/{{item.id}}" class="item-remove-anir 
Item {{ item.id }} 
<ion-delete-button class="ion-minus-circled" 
ng-click="onItemDelete(item) "> 
</ion-delete-button> 
<ion-option-button class="button-assertive" 
ng-click-"edit(item)"» 
Edit 
</ion-option-button> 
<ion-option-button class="button-calm" 
ng-click="share(item)"> 
Share 
</ion-option-button> 
<ion-reorder-button class="ion-navicon" on-reorder="move: 
</ion-item> 


</ion-list> 
</ion-content> 


</body> 
</html> 


Bi E: 





CSS 代码 


body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 


} 
OOOO E 





JavaScript 代码 


angular .module('ionicApp', ['ionic']) 
.controller('MyCtrl', function($scope) { 


$scope.data = { 
showDelete: false 


Hh 


$scope.edit - function(item) ( 
alert('Edit Item: ' + item.id); 


H 
$scope.share = function(item) { 
alert('Share Item: ' + item.id); 


15 


$scope.moveltem = function(item, fromIndex, toIndex) { 
$scope.items.splice(fromIndex, 1); 
$scope.items.splice(toIndex, 0, item); 


) 


$scope.onItemDelete = function(item) { 
$scope.items.splice($scope.items.indexOf(item), 1); 


H 


$scope.items - [ 
id: 


H 
a 
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o 
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3); 


L E ees 


id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 
id: 


ionic 加 载 动 作 


$ionicLoading 是 ionic 默认 的 一 个 加 载 交 互 效果 。 里 面 的 内 容 也 是 可 以 在 模板 里 面 
修改 。 


用 法 


angular.module('LoadingApp', ['ionic']) 
.controller('LoadingCtrl', function($scope, $ionicLoading) { 
$scope.show - function() ( 
$ionicLoading.show( { 
template: 'Loading...' 


3); 

3 

$scope.hide = function(){ 
$ionicLoading.hide(); 


方法 
显示 一 个 加 载 效果 。 


show(opts) 


opts : object 
loading 指 示 器 的 选项 。 可 用 属性 : 


{string=} template 指示 器 的 html 内 容 。 

{string=}  templateUrl 一 个 加 载 html 模 板 的 url 作 为 指示 器 的 内 容 。 
{boolean=}  noBackdrop 是 否 隐 藏 背景 。 默 认 情 况 下 它 会 显示 。 
{number=} delay ERARE £e IP ERPWIR. MiATER, 
{number=} duration 等 待 多 少 毫 秒 后 自动 隐藏 指示 器 。 默 认 情 况 下 ， 指 
示 器 会 一 直 显 示 ， 直 到 触发 .hide()。 


隐藏 一 个 加 载 效 果 。 


hide() 


API 


delegate-handle( 可 选 ) : 字符 串 

该 句柄 定义 带 有 $ionicListDelegate 的 列表 。 
show-delete( 可 选 ) : 布尔 值 

列表 项 的 删除 按钮 当前 是 显示 还 是 隐藏 。 
show-reorder( 可 选 ) : 布尔 值 

列表 项 的 排序 按钮 当前 是 显示 还 是 隐藏 。 
can-swipe( 可 选 ) 布 


列表 项 是 否 被 允许 滑动 显示 选项 按钮 。 默 认 : true. 


实例 
HTML 代码 : 


«html ng-app="ionicApp"> 
<head> 
<meta charset="utf-8"> 
«meta name="viewport" content-"initial-scale-1, maximum-scale-: 


<title>Ionic Modal</title> 


«link href="http://www.runoob.com/static/ionic/css/ionic.min.<¢ 
«script src="http://www.runoob.com/static/ionic/js/ionic. bundle 
</head> 
«body ng-controller="AppcCtr1"> 


<ion-view title="Home"> 
«ion-header-bar» 
«hi class="title">The Stooges</h1i> 
</ion-header -bar> 
<ion-content has-header="true"> 
<ion-list> 
«ion-item ng-repeat-"stooge in stooges" href="#">{{stoc 
</ion-list> 
</ion-content> 
</ion-view> 


</body> 
</html> 


«| = 








JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) { 


// Setup the loader 

$ionicLoading. show( { 
content: 'Loading', 
animation: 'fade-in', 
showBackdrop: true, 
maxWidth: 200, 
showDelay: 0 


+); 


// Set a timeout to clear loader, however you would actually cal- 
$timeout(function () { 

$ionicLoading.hide(); 

$scope.stooges = [{name: 'Moe'}, (name: 'Larry'}, (name: 'Curl 
j, 2000); 





$ionicLoadingConfig 


设置 加 载 的 默认 选项 : 
用 法 : 


var app = angular.module('myApp', ['ionic']) 
app.constant('S$ionicLoadingConfig', { 
template: ' 默 认 加 载 模 板 ..…' 
3); 
app.controller('AppCtrl', function($scope, $ionicLoading) { 
$scope.showLoading = function() { 
$ionicLoading.show(); // 配 置 选 项 在 $ionicLoadingConfig 设置 
}; 
3); 


ionic 模型 


$ionicModal 


$ionicModal 可 以 遮 住 用 户主 界面 的 内 容 框 。 


你 可 以 在 你 的 index 文件 或 者 是 其 他 文件 内 褒 入 以 下 代码 (里 面 的 代码 可 以 根据 你 自 
己 的 业务 场景 相应 的 改变 )。 


«script id-"my-modal.html" type="text/ng-template"> 
«ion-modal-view» 
<ion-header -bar> 
«hi class="title">My Modal title</h1i> 
</ion-header -bar> 
<ion-content> 
Hello! 
</ion-content> 
</ion-modal-view> 
</script> 


然后 你 就 可 以 在 你 的 Controller 里 面 的 注入 $ionicModal 。 然 后 调用 你 刚刚 写 入 的 
模板 ， 进 行 初 始 化 操作 。 就 像 下 面 的 代码 : 


angular.module('testApp', ['ionic']) 
.controller('MyController', function($scope, $ionicModal) { 
$ionicModal.fromTemplateUrl('my-modal.html', { 
scope: $scope, 
animation: 'slide-in-up' 
}).then(function(modal) { 
$scope.modal = modal; 
3); 
$scope.openModal = function() { 
$scope.modal.show(); 
3 
$scope.closeModal = function() { 
$scope.modal.hide(); 
3 
//Cleanup the modal when we're done with it! 
$scope.$on('$destroy', function() { 
$scope.modal.remove(); 
3); 
// Execute action on hide modal 
$scope.$on('modal.hidden', function() { 
// Execute action 
3); 
// Execute action on remove modal 
$scope.$on('modal.removed', function() { 
// Execute action 


}); 
方法 


fromTemplate(templateString, options) 


templateString : 字符 串 

模板 的 字符 串 作 为 模型 的 内 容 。 

options : 对 象 

传递 ionicModal#initialize 方 法 的 选项 。 
返回 : 对 象 , 一 个 ionicModal 控 制 器 的 实例 。 


fromTemplateUrl(templateUrl, options) 


templateUrl : 字符 串 


载 人 模板 的 url。 


options : 对 象 

通过 ionicModal#initialize 方 法 传递 对 象 。 

返回 : promise 对 象 。Promises 对 象 是 CommonJS 工 作 组 提出 的 一 种 规范 ， 目 的 是 
为 异步 编程 提供 统一 接口 。 


ionicModal 


由 $ionicModal 服 务实 例 化 
提示 : 当 你 完成 每 个 模块 清除 时 ， 确 保 调用 remove() 方 法 ， 以 避免 内 存 泄漏 。 


注意 : 一 个 模块 从 RE CAH HEH 'modal.shown' 和 'modal.hidden' ， 把 自身 
作为 一 个 参数 来 传递 


方法 
initialize( 可 选 ) 


创建 一 个 新 的 模型 控制 器 示例 。 

options : 对 象 

一 个 选项 对 象 具 有 一 下 属性 : 

(object-) 范围 子 类 的 范围 。 默 认 : 创建 一 个 $rootScope 子 类 。 


e {string=} 动画 带 有 显示 或 隐藏 的 动画 。 默 认 'slide-in-up' 
e ie 第 一 个 输入 框 获取 焦点 当 显 示 时 ， 模 型 的 第 一 个 输入 元 素 是 否 


自动 获取 焦点 。 默 认 : false. 


e a backdropClickToClose' 点 击 背 景 时 是 否 关 闭 模 型 。 默 认 : 
true。 

show( ) 
示 模 型 实例 


e 返回 值 : promise promise 对 象 ,在 模型 完成 动画 后 得 到 解析 


hide() 


隐藏 模型 。 
e 返回 值 : promise promise 对 象 ,在 模型 完成 动画 后 得 到 解析 


remove( ) 


从 DOM 中 移 除 模型 实例 并 清理 。 
e 返回 值 : promise promise 对 象 ,在 模型 完成 动画 后 得 到 解析 


isShown() 
e 返回 : 布尔 值 ， 用 于 判断 模型 是 否 显示 。 


实例 
HTML 代码 


«html ng-app="ionicApp"> 
<head> 
«meta charset="utf-8"> 
«meta name="viewport" content-"initial-scale-1, maximum-scale-: 


«title»3& $4 fe(runoob.com)«/title» 
«link href="http://www.runoob.com/static/ionic/css/ionic.min.cs 
«script src-'"http://www.runoob.com/static/ionic/js/ionic.bundl: 
</head> 
«body ng-controller="AppcCtri"> 


<ion-header-bar class="bar-positive"> 
<h1i class="title">Contacts</h1i> 
<div class="buttons"> 
«button class="button button-icon ion-compose" ng-click="m¢ 
«/button» 
«/div» 
</ion-header -bar> 
<ion-content> 
<ion-list> 
<ion-item ng-repeat="contact in contacts"> 
{{contact.name}} 
</ion-item> 
</ion-list> 
</ion-content> 


«script id-"templates/modal.html" type="text/ng-template"> 
<ion-modal-view> 
<ion-header-bar class="bar bar-header bar-positive"> 
«hi class="title">New Contact</h1i> 
«button class="button button-clear button-primary" ng-cl: 
«/ion-header-bar» 
«ion-content class="padding"> 


«div class="list"> 
«label class="item item-input"> 
<span class="input-label">First Name</span> 
<input ng-model="newUser.firstName" type="text"> 
</label> 
<label class="item item-input"> 
<span class="input-label">Last Name</span> 
<input ng-model="newUser.lastName" type="text"> 
</label> 
<label class="item item-input"> 
«span class="input -label">Email</span> 
<input ng-model="newUser.email" type="text"> 
</label> 
«button class="button button-full button-positive" ng-« 
«/div» 
«/ion-content» 
«/ion-modal-view- 
«/script» 


«/body» 
«/html» 


LEN 





CSS 代码 


body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 





JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('AppCtrl', function($scope, $ionicModal) { 


$scope.contacts - [ 
{ name: 'Gordon Freeman' }, 
{ name: 'Barney Calhoun' }, 
{ name: 'Lamarr the Headcrab' }, 


1; 


$ionicModal.fromTemplateUrl('templates/modal.html', { 
scope: $scope 

}).then(function(modal) { 
$scope.modal = modal; 


3); 
$scope.createContact = function(u) { 
$scope.contacts.push(( name: u.firstName + ' ' + u.lastName }), 
$scope.modal.hide(); 
J; 
}); 


Rb iE ' | 


ionic 导航 


ion-nav-view 
当 用 户 在 你 的 app 中 浏览 时 ，ionic 能 够 检测 到 浏览 历史 。 通 过 检测 浏览 历史 ， 实 现 
向 左 或 向 右 滑动 时 可 以 正确 转换 视图 。 


采用 AngularUl 路 由 器 模块 等 应 用 程序 接口 可 以 分 为 不 同 的 $state( 状 态 )。Angular 的 
核心 为 路 由 服务 ，URLs 可 以 用 来 控制 视图 。 


AngularUI 路 由 提供 了 一 个 更 强大 的 状态 管理 ， 即 状态 可 以 被 命名 ， 主 套 ， URGE 
并 视图 ， 人 允许 一 个 以 上 模板 呈现 在 同一 个 页 面 。 


此 外 ， 每 个 状态 无 需 绑 定 到 一 个 URL， 并 且 数 据 可 以 更 灵活 地 推送 到 每 个 状态 。 
以 下 实例 中 ， 我 们 将 创建 一 个 应 用 程序 中 包含 不 同 状 态 的 导航 视图 。 


我 们 的 标记 中 选择 ionNavView 作 为 顶层 指令 。 显 示 一 个 页 眉 栏 我 们 用 ionNavBar 
指令 通过 导航 更 新 。 


接 下 来 ， 我 们 需要 设置 我 们 的 将 泻 染 的 状态 值 。 


var app = angular.module('myApp', ['ionic']); 
app.config(function($stateProvider) ( 


$stateProvider 
.State('index', { 

UY ad S AUR 

templateUrl: 'home.html' 
}) 


.State('music', { 
url: '/music', 
templateUrl: 'music.html' 
3); 
3); 


再 打开 应 用 ，$stateProvider 会 查询 url, 看 是 否 匹 配 index KAM, BIR 
index.html 到 <ion-nav-view>。 


页 面 加 载 都 是 通过 URLs 配 置 的 。 在 Angular 中 创建 模板 最 一 个 简单 的 方式 就 是 直接 
将 他 放 到 html 模 板 文件 中 并 且 用 


ionic 平台 


$ionicPlatform 

$ionicPlatform 用 来 检测 当前 的 平台 ， 以 及 诸如 在 PhoneGap/Cordova 中 有 覆盖 
Android 后 退 按钮 。 

方法 


onHardwareBackButton(callback) 


有 硬件 的 后 退 按钮 的 平台 ， 可 以 用 这 种 方法 绑 定 到 它 。 
callback : function 


HFR Eat, PMRW, 


offHardwareBackButton(callback) 


移 除 后 退 按钮 的 监听 事件 。 
callback : function 
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registerBackButtonAction(callback, priority, [actionId]) 


注册 硬件 后 退 按钮 动作 。 当 点 击 按钮 时 ， 只 有 一 个 动作 会 执行 ， 因 此 该 方法 决定 了 
注册 的 后 退 按钮 动作 具有 最 高 的 优先 级 。 


例如 ， 如 果 一 个 上 拉 菜 单 已 经 显示 ， 后 退 按钮 应 该 关闭 上 拉 菜 单 ， 而 不 是 返回 一 个 
页 面 视图 或 关闭 一 个 打开 的 模型 。 


callback : function 
当 点 击 返 回 按钮 时 触发 ， 如 果 该 监视 器 具有 最 高 的 优先 级 。 
priority : number 


仅 最 高 优先 级 的 会 执行 。 
actionId( 可 选 ) : * 


该 id 指定 这 个 动作 。 黑 认 : 一 个 随机 且 唯 一 的 id。 


返回 值 : BE, 一 个 被 触发 的 画 数 ， 将 会 注销 backButtonAction。 


ready([callback]) 


设备 准备 就 绪 ， 则 触发 一 个 回调 图 数 。 
callback(Ji#) : function= 

触发 的 辑 数 。 

返回 : promise 对 象 , 对 象 被 构造 成 功 后 得 到 解析 。 


ionic 浮动 框 


$ionicPopover 


$ionicPopover 是 一 个 可 以 浮 在 app 内 容 上 的 一 个 视图 框 。 
实例 
HTML 代码 


«p» 
«button ng-click-z"openPopover($event)"»217J7P 3X zjTE«/ button» 
</p> 
«script id-"my-popover.html" type="text/ng-template"> 
«ion-popover -view> 
<ion-header -bar> 
«hi class="tit1e"> 我 的 浮动 框 标题 </h1> 
</ion-header -bar> 
<ion-content> 
Hello! 
</ion-content> 
</ion-popover -view> 
</script> 


JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller( 'AppCtrl',['$scope','$ionicPopover', '$timeout', Functic 


$scope.popover = $ionicPopover.fromTemplateUrl( 'my-popover.html', 
scope: $scope 


2r 


// .fromTemplateUrl() 方法 
$ionicPopover.fromTemplateUrl('my-popover.html', ( 
scope: $scope 
}).then(function(popover) { 
$scope.popover = popover; 


+); 


$scope.openPopover = function($event) { 
$scope. popover .show($event); 

3 

$scope.closePopover = function() { 
$scope.popover .hide(); 


// 清除 浮动 框 
$scope.$on('$destroy', function() { 
$scope.popover.remove(); 


+); 

// 在 隐藏 浮动 框 后 执行 

$scope.$on('popover.hidden', function() { 
// 执行 代码 


3); 

// 移 除 浮动 框 后 执行 

$scope.$on('popover.removed', function() { 
// 执行 代码 

3); 





ionic 对 话 框 


$ionicPopup 


ionic 对 话 框 服务 允许 程序 创建 、 显 示 弹 出 窗口 。 
$ionicPopup 提供 了 3 个 方法 : alert(), prompt(), 以 及 confirm() 。 


实例 
HTML 代码 


«body class-"padding" ng-controller-'Popupctrl"- 

«button class="button button-dark" ng-click="showPopup()"> 
弹 窗 显示 

«/button» 

«button class="button button-primary" ng-click="showConfirm()"> 
确认 对 话 框 

</button> 

«button class="button button-positive" ng-click="showAlert()"> 
警告 杠 

«/button» 


«script id-"popup-template.html" type="text/ng-template"> 
«input ng-model="data.wifi" type="text" placeholder="Passwor< 
</script> 
</body> 





JavaScript 代码 


angular.module('mySuperApp', ['ionic']) 
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) { 


// Triggered on a button click, or some other target 
$scope.showPopup = function() { 
$scope.data = {} 


// 自 定义 弹 窗 
var myPopup = $ionicPopup.show( { 
template: '<input type="password" ng-model="data.wifi">', 
title: 'Enter Wi-Fi Password', 
subTitle: 'Please use normal things', 
scope: $scope, 


buttons: [ 
( text: 'Cancel' }, 
{ 
text: '<b>Save</b>', 
type: 'button-positive', 
onTap: function(e) ( 
if (!$scope.data.wifi) { 
// 不 允许 用 户 关 闭 ， 除 非 输入 wifi 密码 
e.preventDefault(); 
) else ( 
return $scope.data.wifi; 


} 
ty 
] 


3); 
myPopup.then(function(res) ( 


console.log('Tapped!', res); 
1); 
$timeout(function() { 
myPopup.close(); // 3 秒 后 关闭 弹 窗 
}, 3000); 


// confirm 对 话 框 
$scope.showConfirm = function() { 
var confirmPopup = $ionicPopup.confirm({ 
title: 'Consume Ice Cream', 
template: 'Are you sure you want to eat this ice cream?' 


3); 
confirmPopup.then(function(res) { 
if(res) { 
console.log('You are sure'); 
) else { 
console.log('You are not sure'); 
} 
3); 


, 


// alert (警告 ) 对 话 框 
$scope.showAlert = function() { 
var alertPopup = $ionicPopup.alert({ 
title: 'Don\'t eat that!', 
template: 'It might taste good' 
H); 
alertPopup.then(function(res) { 
console.log('Thank you for not eating my delicious ice crear 
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ionic 滚动 条 
ion-scroll 
ion-scroll 用 于 创建 一 个 可 滚动 的 容器 。 


用 法 


«ion-scroll 
[delegate-handle=""] 
[direction=""] 
[paging-""] 
[on-refreshz""] 
[on-scroll=""] 
[scrollbar -x=""] 
[scrollbar-y=""] 
[zooming="" |] 
[min-zoom=""] 
[max-zoom=""]> 


«/ion-scroll» 


API 

delegate-handle(Wit) : FHR 
该 句柄 利用 $ionicscrollDelegate 指定 滚动 视图 。 
direction( 可 选 ) : 字符 串 
滚动 的 方向 。 Xx' 或 'y'。 默认 'y'。 
paging( 可 选 ) : 布尔 值 

分 页 是 否 滚动 。 

on-refresh( 可 选 ) : 表达 式 
调用 下 拉 刷 新 ， 由 ionRefresher 触发 。 
on-scroll( 可 选 ) : 表达 式 

当 用 户 滚动 时 触发 。 


scrollbar-x( 可 选 ) : 布尔 值 


是 否 显示 水 平 滚动 条 。 默 认为 false。 
scrollbar-y( 可 选 ) : 布尔 值 
是 否 显示 垂直 滚动 条 。 默 认为 true。 
Zooming( 可 选 ) : 布尔 值 

是 否 支 持 双 指 缩放 。 


min-zoom( 可 选 ) : 整数 
允许 的 最 小 缩放 量 (默认 为 0.5) 


) 整数 
允许 的 最 大 缩放 量 (默认 为 3) 


max-Zoom( 可 选 
实例 
头 


HTML 代码 


<ion-scroll zooming-"true" direction="xy" style="width: 500px; heit 
«div style="width: 5000px; height: 5000px; background: url('htt 
«/ion-scroll» 


E 





CSS 代码 


body { 
cursor: url('http://www.runoob.com/try/demo source/finger.png'), 





JavaScript 代码 


angular.module('ionicApp', ['ionic']); 


ion-infinite-scroll 


当 用 户 到 达 页 脚 或 页 脚 附 近 时 ，ionlinfiniteScroll 指 使 人 允许 你 调用 一 个 函数 。 
当 用 户 滚动 的 距离 超出 底部 的 内 容 时 ， 就 会 触发 你 指定 的 on-infinite。 


用 法 


<ion-content ng-controller="MyController"> 
<ion-infinite-scroll 
on-infinite="loadMore()" 
distance="1%"> 
</ion-infinite-scroll> 
</ion-content> 


function MyController($scope, $http) { 
$scope.items = []; 
$scope.loadMore = function() { 


$http.get('/more-items').success(function(items) { 
useItems(items); 


$scope.$broadcast('scroll.infiniteScrollComplete' ); 
3); 


$scope.$on('stateChangeSuccess', function() ( 
$scope.loadMore(); 


}); 
} 


当 没 有 更 多 数据 加 载 时 ， 就 可 以 用 一 个 简单 的 方法 阻止 无 限 滚动 ， 那 就 是 angular 的 


ng-if 指 今 : 


«ion-infinite-scroll 
ng-if-'"moreDataCanBeLoaded()" 
icon="ion-loading-c" 
on-infinite="loadMoreData()"> 

</ion-infinite-scroll> 


API 

on-infinite : 表达 式 

当 滚动 到 底部 时 触发 的 时 间 。 

distance( 可 选 ) : 字符 串 

从 底部 滚动 到 触发 on-infinite 表 达 式 的 距离 。 默 认 : 1%。 
icon( 可 选 ) : 字符 串 

当 加 载 时 显示 的 图 标 。 默 认 : 'ion-loading-d'。 


$ionicScrollDelegate 


授权 控制 滚动 视图 (通过 ion-content 和 ion-scroll 指 邻 创 建 ) 。 

该 方法 直接 被 $ionicScrollDelegate 服 务 触发 ， 来 控制 所 有 滚动 视图 。 用 
$getByHandle 方 法 控制 特定 的 滚动 视图 。 

用 法 


«body ng-controller-"MainCtrl"- 
<ion-content> 
«button ng-click="scrollTop( )">3% #2) mB! </button> 
</ion-content> 
</body> 


function MainCtrl($scope, $ionicScrollDelegate) { 
$scope.scrollTop = function() { 
$ionicScrollDelegate.scrollTop(); 
H 
} 


方法 
resize() 


告诉 滚动 视图 重新 计算 它 的 容器 大 小 。 


scrollTop([shouldAnimate]) 


shouldAnimate("]it) : 布尔 值 
是 否 应 用 滚动 动画 。 
scrollBottom([shouldAnimate]) 


shouldAnimate( 可 选 ) : 布尔 值 


是 否 应 用 滚动 动画 。 


TutorialsPoint 移动 端 教程 


ionic 侧 栏 菜单 


一 个 容器 元 素 包 含 侧 边 菜单 和 主要 内 容 。 通 过 把 主要 内 容 区 域 从 一 边 拖 动 到 另 一 
边 ， 来 让 左 侧 或 右 侧 的 侧 栏 菜单 进行 切换 。 
效果 图 如 下 所 示 : 


一 Slide me 


Content 


用 法 


要 使 用 侧 栏 菜单 ， 添 加 一 个 父 元 素 <ion-side-menus>， 一 个 中 间 内 容 <ion-side- 
menu-content>， 和 一 个 或 更 多 <ion-side-menu> 指 兮 。 


if 
SZ 


ionic 侧 栏 菜单 314 


<ion-side-menus> 
<!-- FRIAR --> 
«ion-side-menu-content ng-controller="ContentController"> 
</ion-side-menu-content> 


«1-- 左 侧 菜单 --> 

«ion-side-menu side="left"> 

«/ion-side-menu» 

«1-- 右 侧 菜单 --> 

«ion-side-menu side="right"> 

«/ion-side-menu» 
«/ion-side-menus» 


function ContentController($scope, $ionicSideMenuDelegate) { 
$scope.toggleLeft = function() { 
$ionicSideMenuDelegate.toggleLeft(); 


}; 
} 
API 
enable-menu-with-back-views(Hit) : 布尔 值 
在 返回 按钮 显示 时 ， 确 认 是 否 启 用 侧 边 栏 菜单 。 
delegate-handle : FFE 该 句柄 用 于 标识 带 有 $ionicScrollDelegate 的 滚动 视 
图 。 


ion-side-menu-content 


一 个 可 见 主 体内 容 的 容器 ， 同 级 的 一 个 或 多 个 ionSideMenu 指 今 。 
用 法 


<ion-side-menu-content 
drag-content="true"> 
</ion-side-menu-content> 


API 
drag-content( 可 选 ) : 布尔 值 


内 容 是 否 可 被 拖 动 。 默 认为 true。 


ion-side-menu 


一 个 侧 栏 菜单 的 容器 ， 同 级 的 一 个 ion-side-menu-content 18 4. 
用 法 


<ion-side-menu 
side="left" 
width="myWidthValue + 20" 
is-enabled="ShouldLeftSideMenuBeEnabled( ) "> 
</ion-side-menu> 


API 

side : 字符 串 

侧 栏 菜单 当前 在 哪 一 边 。 可 选 的 值 有 : ‘left’ 或 'right'。 
is-enabled( 可 选 ) : 布尔 值 

该 侧 栏 菜单 是 否 可 用 。 

width( 可 选 ) : 数值 

侧 栏 菜单 应 该 有 多 少 像素 的 宽度 。 默 认为 275。 


menu-toggle 
在 一 个 指定 的 侧 栏 中 切换 菜单 。 


用 法 
下 面 是 一 个 在 导航 栏 内 链接 的 例子 。 点 击 此 链接 会 自动 打开 指定 的 侧 栏 菜单 。 


<ion-view> 
«ion-nav-buttons side="left"> 
«button menu-toggle-"left" class="button button-icon icon ion-n: 
</ion-nav-buttons> 


</ion-view> 


SE 





menu-close 


关闭 当前 打开 的 侧 栏 菜单 。 


用 法 
下 面 是 一 个 在 导航 栏 内 链接 的 例子 。 点 击 此 链接 会 自动 打开 指定 的 侧 栏 菜单 。 


«a menu-close href="#/home" class="item"> 首 页 </a> 


$ionicSideMenuDelegate 


该 方法 直接 触发 $ionicSideMenuDelegate 服 务 ， 来 控制 所 有 侧 栏 菜单 。 用 
$getByHandle 方 法 控制 特定 情况 下 的 ionSideMenus。 


用 法 


«body ng-controller-"MainCtrl"- 
«ion-side-menus» 
«ion-side-menu-content» 
内 容 ! 
«button ng-click="toggleLeftSideMenu( )"> 
切换 左 侧 侧 栏 菜单 
«/button» 
</ion-side-menu-content> 
<ion-side-menu side="left"> 
左 侧 菜单 ! 
«ion-side-menu» 
«/ion-side-menus» 
«/body» 


function MainCtrl($scope, $ionicSideMenuDelegate) { 
$scope.toggleLeftSideMenu = function() (1 
$ionicSideMenuDelegate.toggleLeft(); 
}; 
} 


方法 
toggleLeft([isOpen]) 


切换 左 侧 侧 栏 菜单 (如 果 存 在 ) 。 
isopen( 可 选 ) : 布尔 值 


否 打 开 或 关闭 菜单 。 默 认 : 切换 菜单 。 


toggleRight([isOpen] ) 


切换 右 侧 侧 栏 菜单 (如果 存 在 ) 。 
isopen( 可 选 ) : 布尔 值 
否 打开 或 关闭 菜单 。 默 认 : 切换 菜单 。 


getOpenRatio() 


获取 打开 菜单 内 容 超 出 菜单 宽度 的 比例 。 比 如 ， 一 个 宽度 为 100px 的 菜单 被 宽度 为 
50px 以 50% 的 比例 打开 ， 将 会 返回 一 个 比例 值 为 0. 5, 


返回 值 : 浮 点 0 表示 没 被 打开 ， 如 果 左 侧 菜单 多 于 已 打开 或 正在 打开 为 0 到 1， 如 果 
右 侧 菜单 处 于 已 打开 或 正在 打开 为 0 到 -1。 
isOpen() 


返回 值 : Pera, SXUBTZE SX IS EE OZ. 


isOpenLeft() 
返回 值 : 布尔 值 左 侧 菜 单 是 否 已 经 打开 。 
isOpenRight() 
返回 值 : 布尔 值 右 侧 菜单 是 否 已 经 打开 。 


canDragContent ( [canDrag]) 


canDrag("]ib) : 布尔 值 
设置 是 否 可 以 拖 动 内 容 打 开 侧 栏 菜单 。 
返回 值 : 布尔 值 ， 是 否 可 以 拖 动 内 容 打 开 侧 栏 菜单 。 


$getByHandle(handle) 


handle : 字符 串 


例如 : 


$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft(); 
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ionic 滑动 框 


ion-slide-box 


滑动 框 是 一 个 包含 多 页 容器 的 组 件 ， 每 页 滑动 或 拖 动 切换 : 
效果 图 如 下 : 





用 法 
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«ion-slide-box on-slide-changed-"slideHasChanged(S$index)'"» 


«ion-slide» 

«div class="box blue"><h1>BLUE</h1></div> 
</ion-slide> 
<ion-slide> 


«div class="box yellow"><h1>YELLOW</h1></div> 


</ion-slide> 
<ion-slide> 
«div class="box pink"><h1>PINK</h1></div> 
</ion-slide> 
</ion-slide-box> 


API 


delegate-handle(Hit) : 字符 串 

该 句柄 用 $ionicSlideBoxDelegate 来 标识 这 个 滑动 框 。 
does-continue( 可 选 ) : 布尔 值 

滑动 框 是 否 自动 滑动 。 

slide-interval( 可 选 ) : 数字 

等 待 多 少 毫 秒 开始 滑动 (如 果 继 续 则 为 true) o Rii 44000. 
show-pager( 可 选 ) : 布尔 值 

滑动 框 的 页 面 是 否 显示 。 


pager-click( 可 选 ) : 表达 式 


当 点 击 页 面 时 ， 触 发 该 表达 式 (如 果 shou-pager 为 true) 。 传 递 一 


on-slide-changed( 可 选 ) : 表达 式 

当 滑动 时 ， 触 发 该 表达 式 。 传 递 一 个 索引 变量 。 
active-slide( 可 选 ) : 表达 式 

将 模型 绑 定 到 当前 滑动 框 。 


实例 


HTML 代码 


个 索引 变 量 。 


«ion-slide-box active-slide="myActiveSlide"> 
«ion-slide» 
«div class="box blue"><h1>BLUE</h1></div> 
</ion-slide> 
<ion-slide> 
«div class="box yellow"><h1>YELLOW</h1></div> 
</ion-slide> 
<ion-slide> 
«div class="box pink"><h1>PINK</h1></div> 
</ion-slide> 
</ion-slide-box> 


CSS 代码 


.Slider { 
height: 100%; 

} 

.Slider-slide { 
padding-top: 80px; 
color: #000; 
background-color: #fff; 
text-align: center; 


font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Hel 
font-weight: 300; 


} 
.blue { 
background-color: blue; 
} 
.yellow { 
background-color: yellow; 
} 
.pink { 


background-color: pink; 


[i p——MÜ 





JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('SlideController', function($scope) { 
$scope.myActiveSlide = 1; 


}) 


ionic 加 载 动 转 

lon-spinner 

ionSpinner 提供 了 许多 种 旋转 加 载 的 动画 图 标 。 当 你 的 界面 加 载 时 ， 你 就 可 以 呈现 
给 用 户 相应 的 加 载 图 标 。 

该 图 标 采 用 的 是 SVG。 

用 法 


«ion-spinner icon="spiral"></ion-spinner> / /' BG FAK 


像 大 部 分 其 他 的 ionic 组 件 一 样 ，spinner 也 可 以 使 用 ionic 的 标准 颜色 命名 规则 ， 就 像 
下 面 这 样 : 


«ion-spinner class="spinner -energized"></ion-spinner> 


实例 


HTML 代码 


<ion-content scroll-"false" class-"has-header'» 
«p» 
«ion-spinner icon="android"></ion-spinner> 
«ion-spinner icon="i0s"></ion-spinner> 
«ion-spinner icon="ios-small"></ion-spinner> 
«ion-spinner icon="bubbles" class="Spinner -balanced"></ion-spir 
«ion-spinner icon="circles" class-"spinner-energized"»«/ion-sp: 
</p> 


<p> 
«ion-spinner icon="crescent" class="Spinner -royal"></ion-spinne 


<ion-spinner icon="dots" class="Spinner -dark"></ion-spinner> 
<ion-spinner icon="lines" class="spinner -calm"></ion-spinner> 
<ion-spinner icon="ripple" class="Spinner-assertive"></ion-spir 
<ion-spinner icon="spiral"></ion-spinner> 

</p> 


</ion-content> 


EES 





CSS 代码 
body { 
cursor: url('http://www.runob.com/try/demo_source/finger.png'), é 
} 
pt 
text-align: center; 
margin-bottom: 40px !important; 
} 


.spinner svg ( 
width: 1996 !important; 
height: 85px !important; 





JavaScript 代码 


angular.module('ionicApp', ['ionic']) 
.controller('MyCtrl', function($scope) { 


3); 


效果 如 下 所 示 : 
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ionic 选项 卡 栏 操 作 


ion-tabs 


ion-tabs 是 有 一 组 页 面 选项 卡 组 成 的 选项 卡 栏 。 可 以 通过 点 击 选 项 来 切换 页 面 。 
对 于 iOS， 它 会 出 现在 屏幕 的 底部 ，Android 会 出 现在 屏幕 的 顶部 (导航 栏 下 面 )。 


用 法 


«ion-tabs class="tabs-positive tabs-icon-only"> 


<ion-tab title=" 7" icon-on="ion-ios7-filing" icon-off="ion-ios 
<!-- 标签 1 WA --> 
</ion-tab> 


<ion-tab title=" 关 于 " icon-on="ion-ios7-clock" icon-off="ion-ios7 
<1-- 标签 2 内 容 --> 
</ion-tab> 


«ion-tab title=" 设 置 " icon-on="ion-ios7-gear" icon-off="ion-ios7- 
<!-- 标签 3 AR --> 
</ion-tab> 
</ion-tabs> 


[o 


效果 如 下 所 示 : 
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Task 1 


Task 2 


Task 3 


Task 4 


Task 5 


Task 6 


Task 7 





API 

delegate-handle(Wit) : FAR 

该 句柄 用 $ionicTabsDelegate 来 标识 这 些 选项 卡 。 
ion-tab 


隶属 于 ionTabs 
包含 一 个 选项 卡 内 容 。 该 内 容 仅 存在 于 被 选中 的 给 定 选项 卡 中 。 
每 个 ionTab 都 有 自己 的 浏览 历史 。 


用 法 
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«ion-tab 
title="Tab!" 
icon="my-icon" 
hrefz"Z/tab/tab-link" 
on-select="onTabSelected()" 
on-deselect="onTabDeselected()"> 
</ion-tab> 


API 

title : 字符 串 

选项 卡 的 标题 。 

href( 可 选 ) : 字符 串 

但 触 碰 的 时 候 ， 该 选项 卡 将 会 跳 转 的 的 链接 。 
icon( 可 选 ) : FRR 

选项 卡 的 图 标 。 如 果 给 定 值 ， 它 将 成 为 ion-on 和 ion-off 的 默认 值 。 
icon-on( 可 选 ) : 字符 串 

被 选中 标签 的 图 标 。 

icon-off( 可 选 ) : 字符 串 

没 被 选中 标签 的 图 标 。 

badge( 可 选 ) : 表达 式 

选项 卡 上 的 徽章 〈 通 常 是 一 个 数字 ) 。 
badge-sty1le( 可 选 ) : 表达 式 
选项 卡 上 微 章 的 样式 〈 例 ，tabs-positive ) 。 
on-select( 可 选 ) : 表达 式 
选项 卡 被 选中 时 触发 。 

on-deselect( 可 选 ) : 表达 式 

选项 卡 取消 选中 时 触发 。 

ng-click( 可 选 ) : 表达 式 


通常 ， 点 击 时 选项 卡 会 被 选中 。 如 果 设 置 了 ng-Click， 它 将 不 会 被 选中 。 你 可 以 用 
$ionicTabsDelegate.select() 来 指定 切换 标签 。 


$ionicTabsDelegate 


授权 控制 ionTabs 指 兮 。 


该 方法 直接 调用 $ionicTabsDelegate 服 务 ， 控 制 所 有 ionTabs 指 邻 。 用 
$getByHandle 方 法 控制 具体 的 ionTabs 实 例 。 


用 法 
«body ng-controller-"MyCtrl"- 
<ion-tabs> 
<ion-tab title="Tab 1"> 
你 好 ， 标 签 1 | 
«button ng-click="SelectTabWithIndex(1)">i#7#%#% £2</button> 
</ion-tab> 


«ion-tab title="Tab 2"> 你 好 标签 2 ! </ion-tab> 


«/ion-tabs» 
«/body» 


function MyCtrl($scope, $ionicTabsDelegate) { 
$scope.selectTabWithIndex = function(index) { 
$ionicTabsDelegate.select(index); 
} 
} 


方法 
select(index, [shouldChangeHistory]) 


选择 标签 来 匹配 给 定 的 索引 。 

index : 数值 

选择 标签 的 索引 。 
shouldCchangeHistory( 可 选 ) : 布尔 值 


此 选项 是 否 应 该 加 载 这 个 标签 的 浏览 历史 (如 果 存 在 ) ， 并 使 用 ， 或 仅 加 载 默认 页 
面 。 2 5 提示 : 如 果 一 个 ion-nav-view 在 选项 卡 里 ， 你 可 能 需要 设置 
它 为 true。 


selectedIndex() 


返回 值 : 数值 , 被 选中 标签 的 索引 ， 如 -1。 


$getByHandle(handle) 


handle : 字符 串 
例如 : 


$ionicTabsDelegate.$getByHandle( 'my-handle').select(0); 


W3School ios 教 程 


来 源 : ios 教 程 
整理 : 飞龙 


lOS 简介 


IOS 之 前 被 称 为 iPhone OS， 是 一 个 由 葵 果 公司 开发 的 移动 操作 系统 。 
iOS 的 第 一 个 版 本 是 在 2007 年 发 布 的 ， 其 中 包括 iPhone 和 iPod Touch。 
2004 年 4 月 发 布 iPad (第 一 代 ) ， 并 于 2012 年 11 月 发 布 了 iPad 迷 你 款 。 


IOS 设 各 发 布 相当 频繁 ， 由 以 往 经 验 可 知 ， 每 年 都 会 推出 至 少 一 个 版 本 的 iPhone 和 
iPad。 


现在 发 布 了 iPhone5s， 之 前 还 推出 了 iPhone，iPhone3gs，iPhone4,iPhone4s 以 及 
iphone5。 


同样 的 iPad 也 从 iPad 一 代 更 新 到 iPad 四 代 以 及 一 个 特别 的 迷你 版 iPad。 


iOS SDK 已 经 从 1.0 更 新 到 6.0。 最 新 的 OS SDK6.0， 是 唯一 支持 Xcode4.5 和 其 更 高 
版 本 的 版 本 。 


丰富 的 荣 果 文档 ， 使 我 们 能 找到 许多 方法 和 库 用 于 我 们 的 部 署 目标 。 在 Xcode 的 当 
前 版 本 中 ， 我 们 能 够 在 iOS4.3,5.0 和 6.0 的 部 署 目标 之 间 选 择 。 


IOS 的 影响 能 够 从 以 下 的 特点 显现 : 


Facebook 和 Twitter 上 ， 加 速度 计 ，GPS， 高 端 义理 器 ， 相 机 ，Safari 浏 览 器 ， 功 能 
强大 的 API， 游 戏 中 心 ， 在 应 用 程序 内 购买 ， 提 醒 ， 宽 范围 的 手势 


e 地 图 

e Siri 

e Facebook 和 Twitter 
Multi-Touch (多 点 触摸 ) 
Accelerometer (加 速度 传感器 ) 
GPS 

高 性 能 义理 器 

相机 

Safari 浏 览 器 

功能 强大 的 API 
游戏 中 心 

在 应 用 程序 内 购买 
提醒 功能 

手势 


iPhone 和 iPad 的 用 户 日 益 增 多 ， 这 为 iPhone 和 iPad 应 用 商城 的 研发 者 创造 了 赚钱 的 
机 过。 


IOS 最 新 的 一 点 是 ， 葵 果 公 司 研 发 了 应 用 商城 ， 这 样 用 户 可 以 购买 应 用 程序 来 完善 
他 们 的 iOS 设 各 。 


研发 者 可 以 在 应 用 商城 发 布 免费 和 付费 的 应 用 软件 。 


开发 应 用 程序 并 将 其 发 布 到 应 用 商店 ， 开 发 人 员 需 要 注册 iOS 开 发 者 计划 ， 为 其 发 
展 更 新 Xcode 每 年 话费 99 美 元 和 Mac Mountain Lion 或 更 高 。 


注册 Apple 开 发 者 
对 拥有 Apple 设 备 的 用 户 来 说 ， 非 常 有 必要 拥有 Apple ID， 而 且 成 为 一 个 研发 者 ， 必 
须 用 到 Apple ID, 获 取 Apple ID 是 免费 的 ， 也 无 需 有 资费 方面 的 顾虑 。 
拥有 Apple 账 户 有 以 下 好 久 : 
。 易 于 了 解 研发 工具 ; 


e 全 球 研发 者 视频 会 议 ; 
e 受 邀 加 入 iOS 研 发 者 团队 ; 


A -H- 
ZEB ZR TEC 
1. € (https://developer.apple.com/programs/register/) 并 选择 创建 Apple ID 


é Developer Technologies Resources P Support Member Center Q 





Register as an Apple Developer. 


Register for free to access Apple developer tools and resources for creating iOS and Mac apps, 


including Xcode, WWDC videos, sample code, and more. 


Sign In 


Register with the same Apple ID you use for other Apple services, such as iTunes, 


iCloud, and the Apple Online Store. 


Create Apple ID 


Please create a new Apple ID if you are enrolled in the iOS Developer Enterprise Create Apple ID 


Program, have an iTunes Connect account, or prefer to have an Apple ID dedicated 
to your business transactions. 


2、 输 入 个 人 信息 
3、 返 回 邮 箱 确 认 ， 激 活 账 号 
4、 下 载 研发 工具 ，Xcode 及 它 所 包含 的 iOS 模 拟 器 ，iOS SDK 和 其 他 研发 资源 


申请 APP 开 发 者 
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1. mi (https://developer.apple.com/programs/ios/) 


é Developer Technologies Resources Program Support Member Center a 


iOS Developer Program 


The fastest path from code to customer. 








1. Develop 2. Test 3. Distribute 


3、 登 录 账 号 (BARKS) 或 注册 Apple ID 


4、 选 择 个 人 账号 或 公司 账号 ， 研 发 者 团队 使 用 公司 账号 ， 个 人 账号 不 能 添加 其 他 
用 户 


5、 新 用 户 进 入 个 人 信息 页 面 ， 使 用 信用 卡 购 买 加 入 研发 项 目 
6、 选 择 会 员 中 心 ， 利 用 研发 者 资源 


€ Developer Member Center 
^ People Programs & Add-ons Your Account 
Orgamuaaton ~ apas M, Raj Cumar | Log evt 
Developer Program Resources Developer Program Overview 


Read about accevimg the retmartes ad 


Technical Resources and Tools Deve 
bereits of your IDA C * Program 


zat. Dev Centers x 105 Provisioning Portal E 
Quicthy potis à range Who Pawikan & test pest app n^ yrs 
M 之 一 ~ So meron 
ro 
os Me islan 


News amd Announcemems a 


Cet apo acbmissen tips, learn about 
App Store Distribution sew festur im (Tuset Connect and 
serere guidance en develogens and 


App Store Resource Center ITunes Connect marketing your apps. Learn more + 
- Learn about how to prepare + uteret amd matage pour api pe 
App Store Suterension the Ago Store 


Community and Support 


= Apple Developer Forums L4 Developer Support 


Program 


MO SA 22r 
OS 4 335 


7、 在 此 处 可 以 执行 以 下 操作 : 


创建 资源 调配 的 配置 文件 
管理 团队 和 设备 

通过 iTunes Connect 管 理应 用 到 应 用 程序 
获取 论坛 和 技术 支持 


lOS Xcode 安装 


1. M https://developer.apple.com/downloads/ 下 载 Xcode 的 最 新 版 本 。 


& Developer Tec*eologies Revources Programs Suggert Member Center 
Downloads for Apple Developers He Maj Kumar 
1-20 0f 180 Page ' of9 
Descr pteon feront Du 
Categories 
«f Applications » HTTP Live Streaming Tools dan 16,2013 
M Developer Tools - 
of 105 Xcode 4.5.2 Jan 14, 2013 
v 05X 
Thess na beens vera ai Sie DM See waeloper toolset for Mac. i£ Oye t "amendtamd 
M. OS X Server (9 Pod touch, and Pad. R nduder ne 106 6 SOK and OS K1 0.8 SOK. Xcode 4 - 
foquret OS X Moun nta Lion or OS XL 
a 
* Java for OS X Developer Preview 11M4001+10M4001 Jan 11,2013 
» Xcode 44.1 Dec 5, 2012 
» Xcode44 Dec 5, 2012 
> Xcode 4.6 Developer Preview 3 Dec 3, 2012 
> lOUSBFamity Log Release for OS X 10.7.5 Nov 28, 2012 
» Hardware IO Tools for Xcode - Late July 2012 Nov 26, 2012 


2. WH Xcode dmg x fF 
3、 将 找到 的 设备 安装 和 打开 


4、 在 这 里 会 有 两 个 项 目 在 显示 的 窗口 中 即 Xcode 应 用 程序 和 应 用 程序 文件 夹 的 快捷 
方式 


5、 将 Xcode 拖 搜 并 复制 到 应 用 程序 
6、 在 应 用 里 选择 和 运行 程序 ，Xcode 也 将 成 为 运行 程序 中 的 一 部 分 
还 可 以 从 Mac App store 里 下 载 Xcode， 并 按照 屏幕 上 的 安装 步 


界面 生成 器 (Interface Builder) 


利用 界面 生成 器 这 一 工具 ， 能 很 容易 的 创建 UI 界面 。 
可 利用 一 系列 的 UI 元 素 ， 拖 搜 进入 UI 可 视界 面 。 
RTE FRA SRA PR, HESS MMU. 
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在 对 象 库 的 下 方 包含 有 全 部 必要 的 UI 元 素 。 用 户 界 面 通常 称 为 xibs， 这 是 他 们 的 文 
件 扩展 名 。 


每 个 xibs 都 链接 到 相应 的 试图 控制 器 。 


lOS# 3.28 


IOS 模 拟 器 实际 上 包含 两 种 类 型 的 设 各 即 iPhone 和 iPad 及 其 不 同 的 版 本 。 
iPhone 版 本 包括 iPhone (常规 版 ) 、iPhone Retina，iPhone5,iPhone53。 
lpad 有 iPad 和 iPad Retina。iPhone 模 拟 器 显示 如 下 : 





你 可 以 在 经 度 和 纬度 影响 应 用 程序 的 位 置 的 情况 下 运行 iOS 模 拟 器 ， 也 可 以 模拟 内 
存 警告 和 呼叫 在 模拟 器 中 的 状态 。 

能 够 多 数目 的 使 用 模拟 器 ， 但 不 能 测试 像 加 速度 计 这 样 的 设备 的 功能 。 因 此 你 可 能 
需要 iOS 设 备 来 测试 一 个 应 用 程序 的 所 有 方面 。 


Objective-C 简介 


在 iOS 的 开发 中 使 用 的 是 Objective C 语 言 ， 它 是 一 中 面向 对 象 的 语言 ， 因 而 对 于 已 
经 掌握 面向 对 象 语言 知识 的 编程 者 来 说 是 非常 简单 的 。 


接口 和 实现 


在 Objective 里 完成 的 文件 被 称 为 界面 文件 ， 该 类 文件 的 定义 被 称 为 实现 文件 。 
一 个 简单 的 界面 文件 MyClass.h 将 如 图 所 示 : 
Qinterace MyClass:NSObject( 


// class variable declared here 


j 


// class properties declared here 
// class methods and instance methods declared here 
@end 


执行 MyClass.m 文 件 ， 如 下 所 示 


@implementation MyClass 
// class methods defined here 
@end 


创建 对 象 
完成 创建 对 象 ， 如 下 所 示 


MyClass *objectName = [[MyClass alloc]init] ; 


方法 (methods) 
Objective C 中 声明 的 方法 如 下 所 示 : 


-(returnType)methodName:(typeName) variablei :(typeName)variable2; 
了 — 1 
下 面 显示 了 一 个 示例 : 








-(void)calculateAreaForRectangleWithLength: (CGfloat)length 
andBreadth: (CGfloat)breadth; 


你 可 能 会 想 什 么 是 andBreadth 字 符 串 ， 其 实 它 的 可 选 字 符 串 可 以 帮助 我 们 阅读 和 理 
解 方 法 ， 尤 其 是 当 方 法 被 调用 的 时 候 。 


在 同一 类 中 调用 此 方法 ， 我 们 使 用 下 面 的 语句 。 


[self calculateAreaForRectangleWithLength:30 andBreadth:20]; 


正如 上 文 所 说 的 andBreath 使 用 有 助 于 我 们 理解 breath 是 20。Self 用 来 指定 它 是 一 个 
类 的 方法 。 


类 方法 (class methods) 


直接 而 无 需 创建 的 对 象 ， 可 以 访问 类 方法 。 他 们 没有 任何 变量 和 它 关 联 的 对 象 。 示 
例如 下 : 

*(void)simpleClassMethod; 
它 可 以 通过 使 用 类 名 (假设 作为 MyClass 类 名 称 ) 访问 ， 如 下 所 示 : 


[MyClass simpleClassMethod]; 


实例 方法 
可 以 创建 的 类 的 对 象 后 只 访问 实例 方法 ， 内 存 分 配 到 的 实例 变量 。 实 例 方 法 如 下 所 


aN: 
-(void)simpleInstanceMethod; 
创建 类 的 对 象 后 ， 它 可 以 访问 它 。 如 下 所 示 : 


MyClass *objectName = [[MyClass alloc]init] ; 
[objectName simplelInstanceMethod]; 


Objective C 的 重要 数据 类 型 


数据 类 型 
NSString 字符 串 
CGfloat 浮 点 值 的 基本 类 型 
NSInteger 整 型 
BOOL 布尔 型 


打印 日 志 


人 它 将 打印 在 设备 日 志和 调试 版 本 的 控制 台 和 分 别 调试 模 
式 上 。 


如 NSlog(@""); 


控制 结构 


除了 几 个 增补 的 条 款 外 ， 大 多 数 的 控制 结构 与 C 以 及 C++ 相同 
属性 (properties) 

用 于 访问 类 的 外 部 类 的 变量 属性 

比如 : @property ( 非 原 子 、 强 ) NSString*myString 

访问 属性 

可 以 使 用 点 运算 符 访问 属性 ， 若 要 访问 上 一 属性 可 以 执行 以 下 操作 


self.myString = @"Test"; 


还 可 以 使 用 set 的 方法 ， 如 下 所 示 : 


[self setMyString:Q"Test"]; 


类 别 (categories) 


类 用 于 将 方法 添加 到 现 有 类 。 通过 这 种 方法 可 以 将 方法 添加 甚至 不 用 执行 文 
件 ， Mig quee daten MyClass 的 样本 类 别 ， uc 


Qinterace MyClass(customAdditions) 
- (void)sampleCategoryMethod; 
Qend 


Qimplementation MyClass(categoryAdditions) 


-(void)sampleCategoryMethod{ 
NSLog(@"Just a test category"); 


} 


数组 (arrays) 


NSMutable 和 NSArray 是 ObjectiveC 中 使 用 的 数组 类 ， 前 者 是 可 变数 组 ， 后 者 是 不 
可 变数 组 。 如 下 : 


NSMutableArray *aMutableArray = [[NSMutableArray alloc]init]; 
[anArray addObject:@"firstobject"]; 

NSArray *aImmutableArray = [[NSArray alloc] 
initWithObjects:Q"firstObject",nil]; 


词典 


NSMutableDictionary 和 NSDictionary 是 Objective 中 使 用 的 字典 ， 前 者 可 变 词典 ， 后 
者 不 可 变 词 典 ， 如 下 所 示 : 


NSMutableDictionary*aMutableDictionary = [[NSMutableArray alloc]in: 
[aMutableDictionary setObject:@"firstobject" forKkKey:@"aKkey"]; 
NSDictionary*aImmutableDictionary= [[NSDictionary alloc]initWithOb: 
@"firstObject",nil] forKeys:[ NSArray arrayWithObjects:Q"aKey"]]; 
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创建 第 一 款 iPhone 应 用 程序 


现在 让 我 们 来 创建 一 个 在 iOS 模 拟 器 上 运行 的 简单 视图 应 用 (空白 的 应 用 程序 ) 。 
操作 步骤 如 下 : 
1、 打 开 Xcode 并 选择 创建 一 个 新 的 Xcode 项 目 。 


RBAN 





Welcome to Xcode 


Version 4,5 (4182) 
Create a new Xcode project No recents 
Start building à new Mac, iPhone or iPad 
application from one of the included templates 


Connect to à repository 
Use Xcode's integrated source control features to 
work with your existing projects 


Learn about using Xcode 
Explore the Xcode development environment with 
the Xcode 4 User Guide 


Go to Apple's developer portal 
Visit the Mac and iOS Dev Center websites at 
Geveloper.apple.com No Selection 


orm 











| Open Other... | [V Show this window when Xcode launches | Cancel | Open 


2. 然后 选择 单一 视图 应 用 程序 


Choose a template for your new project 
Bios — 
Application il 
Framework & Library | 
Other 
cocos2d 


cocos2d v2.x 
cocos2d-x 





Master-Detail OpenGL Game Page-Based ingle View 
Application Application Application 





cocos3d t r 1 

emo-framework | Es kyssa 
& osx 

Application 

Framework & Library 

Application Plug-in | 

System Plug-in 

Other 

cocos2d 

cocos2d v2.x 


| Tabbed Application Utility Application Empty Application 





| [1] Single View Application 
| 


This template provides a starting point for an application that uses a single view. It provides a 
view controller to manage the view, and a storyboard or nib file that contains the view, 





EE MR 
. Cancel | Previous 
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3. 接 下 来 输入 产品 名 称 即 应 用 程序 名 称 、 组 织 名 称 和 公司 标识 符 。 






Choose options for your new project: 


Produet name [wa | 


Organization Name YourOrganizationName 
! n. Company Identifier | com.yourcompany 
Bundle identifier com.yourcompany.MyFirstApp 











Class Prefix XYZ 


Devices | iPhone $j 
1.) Use Storyboards 
@ Use Automatic Reference Counting 
C] Include Unit Tests 
| Camel | | Previous | {Next .] 


4. 确定 已 经 选择 自动 应 用 计数 ， 以 自动 释放 超出 范围 的 资源 。 单 击 下 一 步 。 
5. 选 择 项 目 目录 并 选择 创建 


FAVORITES 





E All My Files 
($$ rajkumar 
JÀ Applications | 
团 Documents 
L3 Applications 
© Downloads 
DEVICES f 
O RAI 全 | 














Source Control: | | Create local git repository for this project 
Xcode will place your project under version control 
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6. 你 将 看 到 如 下 所 示 的 页 面 











Aat Dita 








o C m 
屏幕 上 方 能 够 设置 方向 、 生 成 和 释放 。 有 一 个 部 署 目标 ， 设 各 支持 4.3 及 以 上 版 本 的 
部 署 目标 ， 这 些 不 是 必须 的 ， 现 在 只 要 专注 于 运行 该 应 用 程序 。 


7. 在 下 拉 菜 单 中 选择 iPhone Simulator 并 运行 。 


Lun virw INAMVILOI E CULL! 


-~ IOS Device 

..| iPad 6.0 Simulator 

APIE ML 6.0 Simulator 
EPE 


8. 成 功 运行 第 一 个 应 用 程序 ， 将 得 到 的 输出 ， 如 下 所 示 。 
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更 改 背景 颜色 使 之 有 开始 的 界面 生成 器 。 选 择 ViewControllerxib。 在 右 侧 选择 背景 
选项 ， 更 改 颜色 并 运行 。 









































eL ————— 
- 


10885 _ =o 


在 上 述 项 目 中 ， 默 认 情 况 下 ， 部 署 目标 已 设置 为 OS6.0 且 自动 布局 将 被 启用 。 


为 确保 应 用 程序 能 \OS4.3 设 各 上 正常 运行 ， 我 们 已 经 在 开始 创建 应 用 程序 时 修改 了 
部 署 目标 ， 但 我 们 不 禁用 自动 布局 ， 要 取消 自动 布局 ， 我 们 需要 取消 选择 自动 班 上 
复 选 框 在 文件 查看 器 的 每 个 nib， 也 就 是 xib 文 件 。 


Xcode 项 目 IDE 的 各 部 分 显示 如 下 ( 芋 果 Xcode4 用 户 文档 ) 





Filter bar Debug bar 


在 上 面 所 示 的 检查 器 选择 器 栏 中 可 以 找到 文件 检查 器 ， 且 可 以 取消 选择 自动 布局 。 
当 你 想 要 的 目标 只 有 iOS6.0 的 设备 时 ， 可 以 使 用 自动 布局 。 
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当然 ， 也 可 以 使 用 新 功能 ， 如 当 加 注 到 iOS6 时 ， 就 可 以 使 用 passbook 这 一 功能 。 
现在 ， 以 los4.3 作 为 部 署 目标 。 


深入 了 解 第 一 款 IOS 应 用 程序 代码 


5 个 不 同文 件 生成 应 用 程序 ， 如 下 所 示 


AppDelegate.h 
AppDelegate.m 
ViewController.h 
ViewController.m 
ViewController.xib 


我 们 使 用 单行 注释 UJ) 来 解释 简单 代码 ， 重 要 的 项 目 代码 解释 在 代码 下 方 。 


AppDelegate.h 


// Header File that provides all UI related items. 
#import &lt;UIKit/UIKit.h&gt; 

// Forward declaration (Used when class will be defined /imported 
Qclass ViewController; 


// Interface for Appdelegate 
Qinterface AppDelegate : UIResponder &lt;UIApplicationDelegate&gt; 
// Property window 
@property (strong, nonatomic) UIWindow *window; 

// Property Viewcontroller 
@property (strong, nonatomic) ViewController *viewController; 
//this marks end of interface 
@end 


isi —— m 
代码 说 明 


e。AppDelegate 调 用 UIResponder 来 处理 los 事 件 。 

e 完成 UIApplication 的 命令 ， 提 供 关 键 应 用 程序 事件 ， 如 和 启动 完毕 ， 终 止 ， 等 等 

e 在 iOS 设 各 的 屏幕 上 用 UlWindow 对 象 来 管理 和 协调 各 种 视角 ， 它 就 像 其 它 加 载 
视图 的 基本 视图 一 样 。 通 常 一 个 应 用 程序 只 有 一 个 窗口 。 

e UlViewController3E 4^ Z8 B£ $3: Ft 





AppDelegate.m 


// Imports the class Appdelegate's interface 
import "AppDelegate.h" 


// Imports the viewcontroller to be loaded 
#import "ViewController.h" 


// Class definition starts here 
Qimplementation AppDelegate 


// Following method intimates us the application launched success! 
- (BOOL)application:(UIApplication *)application 
didFinishLaunchingWwithOptions:(NSDictionary *)launchOptions 
{ 
self.window = [[UIWindow alloc] initWithFrame: 
[[UIScreen mainScreen] bounds] ]; 
// Override point for customization after application launch. 
self.viewController = [[ViewController alloc] 
initWithNibName:@"ViewController" bundle:nil]; 
self .window.rootViewController = self.viewController; 
[self .window makeKeyAndVisible]; 
return YES; 


(void )applicationwillResignActive: (UIApplication *)application 


/* Sent when the application is about to move from active to ir 
This can occur for certain types of temporary interruptions 
(such as an incoming phone call or SMS message) 

or when the user quits the application and it begins the trans: 
background state. Use this method to pause ongoing tasks, disal 
and throttle down OpenGL ES frame rates. Games should use this 
to pause the game.*/ 


(void)applicationDidEnterBackground:(UIApplication *)application 


/* Use this method to release shared resources, save user data, 
timers, and store enough application state information to rt 
application to its current state in case it is terminated late! 
application supports background execution, this method is calle 
of applicationWillTerminate: when the user quits.*/ 


(void)applicationWillEnterForeground:(UIApplication *)applicatior 


/* Called as part of the transition from the background to the 
here you can undo many of the changes made on entering the bac! 


(void)applicationDidBecomeActive:(UlApplication *)application 


/* Restart any tasks that were paused (or not yet started) whi- 
application was inactive. If the application was previously in 
optionally refresh the user interface.*/ 


(void)applicationWillTerminate:(UIApplication *)application 


/* Called when the application is about to terminate. Save dat: 
See also applicationDidEnterBackground:. */ 


} 
@end 


«| Ed 








代码 说 明 
e 此 处 定义 UIApplication。 上 面 定 义 的 所 有 方法 都 是 点 用 程序 UI 调动 和 不 包含 任 
何 用 户 定义 的 方法 。 
e UIWindow 对 象 被 分 配 用 来 保存 应 用 程序 分 配对 象 。 


e UIController 作 为 窗口 初始 视图 控制 器 
e 调用 makeKeyAndVisible 能 使 窗口 可 见 


ViewController.h 


#import 


// Interface for class ViewController 
@interface ViewController : UIViewController 


@end 


代码 说 明 


e ViewController 类 继承 UlViewController， 为 ijOS 应 用 程序 提供 基本 视图 管理 模 
型 。 


ViewController.m 


#import "ViewController.h" 


// Category, an extension of ViewController class 
Qinterface ViewController () 


Qend 
Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 
// Do any additional setup after loading the view, typically fi 
} 


- (void)didReceiveMemoryWarning 


{ 
[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


} 

@end 
E — HB 
代码 说 明 

e 在 这 里 两 种 方法 实现 UIViewController 类 的 基 类 中 定义 


e 初始 视图 加 载 后 调用 viewDidLoad 中 的 安装 程序 
e 在 内 存 警告 的 情况 下 调用 didReceviveMemoryWarning 





Ek AN 
ja) J | 


在 iOS 中 ， 操 作 (action) MAHEO (Outlet) 指 的 是 ibActions 和 ibOutlets， 也 就 是 
ib 接 口 生成 器 所 在 的 地 方 。 这 些 都 和 UI 元 素 相 关 ， 我 们 将 直观 的 了 解 他 们 后 探讨 如 
何 实现 他 们 。 


步骤 


1、 让 我 们 使 用 第 一 款 iPhone 应 用 程序 。 
2、 从 导航 部 分 中 的 文件 中 选择 ViewController.xib 文 件 
3、 从 右手 边 得 窗口 下 面 显示 的 窗口 格 库 中 选择 UI 元 素 


TutorialsPoint 移动 端 教程 


Label - A variably sized amount of 
Label static text. 


multiple segments, each of which 
functions as a discrete button. 





4、 拖 搜 UI 元 素 到 界面 生成 器 的 可 视 框 中 
5、 添 加 标签 和 红色 圆 形 按钮 到 可 视图 中 
e 











6、 在 工作 区 工具 栏 的 右上 角 找 到 编辑 器 选择 按钮 ， 如 下 图 所 示 
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7、 编 辑 器 区 域 中 心 有 两 个 窗口 ，ViewController.xib 文 件 和 ViewController.h 
8、 右 击 标签 上 的 选择 按钮 ， 按 住 并 拖 动 新 引用 参照 ， 如 下 所 示 


" 
A 
* 
I» 
E 
» 
» 
n 
A 


> C me Ven i 2000) 


‘i 
j} ViewController.h 
Fie'y Owner / MyFirstApp 


Hu reated by RajKu mar on 20/61/13. 
2013 


O Objects /1 Copyr igh 

YourOrganizationName, All rights 
"| View 

reserved, 









&import <UIKit/UIKit. h» 


Qinterface ViewController : 
UfViewCont roller 





9、 现 在 放 在 ViewControllerh 之 间 的 大 括号 中 。 也 可 以 放 在 文件 中 ， 如 果 是 这 样 ， 
必须 在 做 这 个 之 前 已 经 添加 了 。 如 下 所 示 


9| import <ULKIT/ULKIT. N> 














Connection | Outlet b 
Object ^ File's Owner 1 @interface ViewController : 
UIViewController 
Name |myTitleLabel a 
Type |UlLabel Iv | 
Storage | Strong À Label = Label 





Cancel Connect 


v Referencing Outlets 
New Referencing Outlet 


w Referencing Outlet Collections 
New Referencing Outlet Collection 


10. 输入 输出 口 (Outlet) 的 标签 名 称 ， 这 里 给 出 的 是 myTitleLable。 单 击 链接 ， 
成 ibOutlet 


同样 的 ， 添 加 操作 ， 只 需 右 击 倒 圆 角 和 矩形 ， 选 择 触摸 内 心 拖 动 它 下 方 的 大 括号 


A] 733 5 — li: > c ERI 
创建 第 一 款 iPhone 应 月 


+ 
->H 
Ho 
cur 
2) 
NO 


Ol 


Fes Owner 
@ Fw neon 
G objects 


+ V 
tabel 











2 *:-D0B *«2»/0n 
ViewController.h 
MyFirstApp 
Created by RajKumar on 20/01/13. 
Copyright (c) 2013 
Your izatiocrName,. All rights 
reserved. 
HH 
#ieport «JUIKIt/UIKit,h» 
ginterface ViewController : 
ITV Lew trolle 
{ 
* IBOutlet UlLsbel emyTitleLabel; 





12、 重 新 命名 为 setTitleLable 


Connection 
Object 
Name 

Type 

Event 


Arguments 








Cancel 


(| Action 


IBOutlet UILabel 


.. File's Owner 


setTitleLabel| 


| ly | 
; ff eend 


lid 
llections 

gestar enecognizers 

v Sent Events 
Did End On Exit 
Editing Changed 
Editing Did Begin 
Editing Did End 
Touch Cancel 


ms 


} 





Touch Up Inside 
Sender 


Button - Button 


Touch Down 

Touch Down Repeat 
Touch Drag Enter 
Touch Drag Exit 


Touch Drag Inside 
Touch Drag Outside 


Touch Up Inside 
Touch Up Outside 
Value Changed 





13, 


Referencing Outlets 

New Referencing Outlet 
Referencing Outlet Collections 
New Referencing Outlet Collection 


选择 ViewControllerm 文 件 ， 有 一 种 方法 ， 如 下 所 示 


xmyTitleLabel; 





ry 
V 


101010101010101010, 


i +1010 


ata 
WL 


-(IBAction) setTitleLabel:(id)sender( 
j 


14、 在 上 述 的 方法 内 ， 如 下 所 示 ， 添 加 一 个 语句 


[myTitleLabel setTitleText:@"Hello"]; 


Carrier > 12:09 PM 


Button 








16、 单 击 按钮 


Carrier > 12:09 PM 


Button 





> > 
17.、 创 建 的 参照 (outlets) 按钮 标签 已 更 改 为 对 按钮 执行 的 操作 (actions) 


18、 由 上 可 知 ，IBOutlet 将 创建 对 UIElement 的 引用 (Ub 4^ x; UlLable) ， 同 样 的 
IBAction 和 UIButton 通 过 执行 操作 和 UIButton 相 链接 。 


19、 当 创建 动作 时 通过 选择 不 同 的 事件 你 可 以 做 不 同 的 操作 。 


委托 (Delegates) 示例 


假设 对 象 A 调 用 B 来 执行 一 项 操作 ， 操 作 一 旦 完成 ， 对 象 A 就 必须 知道 对 象 B 已 完成 
任务 且 对 象 人 将 执行 其 他 必要 操作 。 


在 上 面 的 示例 中 的 关键 概念 
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A 是 B 的 委托 对 象 

B 引 用 一 个 A 

A 将 实现 B 的 委托 方法 
B 通 过 委托 方法 通知 


创建 一 个 委托 (Delegates) 对 象 
1. 创建 一 个 单一 视图 的 应 用 程序 
2. 然后 选择 文件 File -> New -> File... 


@ Xcode Edit View Navigate Editor Product Window Help 
eoo TS 7 aT? 


Add Files to "SampleDelegate"... TA Window QXT | 







Open... 3880 
Open Recent » Target... 
Open Quickly... ago Project... QEN 
" ps SampleDel Workspace... “SN 
lurgeni05$ — Close Window W A ea 
v|[.jSampleDel Close Tab roup 
ate Close "AppDelegate.m" ^W | Group from Selection 
ii 2 -  mdjmwumar Un 59/1/15. 
3 ViewCot Close Project NW (c) 2013 Organization nai 
m ViewCol Saye xS 
l^] ViewCot Du : 
m plicate... TES Leaate.hn 
» I n Revert to Saved y 
> [H] Products Unlock ontroller.h" 
| Export... 


n AppDelegate 
Show in Finder m» 
Oben with External Editor ation:(UIApplication x)a| 
: : ary x)launchOptions 
Save As Workspace... 


Project Settings... w = [[UIWindow alloc] in 


e point for customizatio! 
ontroller = [[ViewContro 


Sauce arepe K s thNibName:Q"ViewControll 
Create Snapshot... ES w.rootViewController = s 
Restore Snapshot... ow makeKeyAndVisible] ; 
Page Setup... Q3P ' 
Print... P 
i , cationWillResignActive:(U: 
| // Sent when the application is ab 


3. 然后 选择 Objective C% 3; F—25 
4. 将 SampleProtocol 的 子 类 命名 为 NSObject， 如 下 所 示 
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Choose options for your new file: 








Class |SampleProtocol - | 


sibus of 


Targeted for iPad 
_| With XIB for user interface 








| Cancel Previous | 


5. 然后 选择 创建 
6. 向 SampleProtocol.h 文 件 夹 中 添加 一 种 协议 ， 然 后 更 新 代码 ， 如 下 所 示 : 


#import &lt;Foundation/Foundation.h&gt; 

// Protocol definition starts here 

Qprotocol SampleProtocolDelegate &lt;NSObject&gt; 
Qrequired 

- (void) processCompleted; 

Qend 

// Protocol Definition ends here 

Qinterface SampleProtocol : NSObject 


// Delegate to respond back 
id &lt;SampleProtocolDelegate&gt; delegate; 


j 


Qproperty (nonatomic,strong) id delegate; 
-(void)startSampleProcess; // Instance method 


Qend 


7. Implement the instance method by updating the SampleProtocol.m file as 
shown below. 
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#import "SampleProtocol.h" 
Qimplementation SampleProtocol 
-(void)startSampleProcess{ 


[NSTimer scheduledTimerWithTimeInterval:3.0 target:self.delegat 
selector:@selector(processCompleted) userInfo:nil repeats:NO]; 


} 
Qend 


«| 








8. 将 标签 从 对 象 库 拖 到 UIView， 从 而 在 ViewControllerxib 中 添加 UILabel， 如 下 所 
示 : 








一 一 一 


* 
u| 4 > | [5 SampleDelegate ) | 'SampleDelegate > || ViewController.xib > [Ñ ViewController.xib (En...) | |View). |Label - Label | n Dis 6 
T 
| Y Label 








g Placeholders 


Text | Plain 
File's Owner 


[:] First Responder Label 


x Color: MMM Default 

Qs Objects - 
| Font | System 17.0 
v View 


UN LH O O Alignment! = | * | 
Lines 1|: 
[L1 Behavior M Enabled 
| | | Highlighted 





M E 


Baseline | Align Baselines 


Line Breaks | Truncate Tail 
Autoshrink | Fixed Font Size 
-.] Tighten Letter Spacing 
Highlighted | MINI | Default 
Shadow | C= | Default 





Shadow Offset o(s) -1f 
Horizontal Vertical 


Y View 


Mode | Left. 


ogg 
ogg 


Tag ols 


Interaction | | User Interaction Enabled 
|_| Multiple Touch 


Alpha lj: 
Background | C= | Default 


D üie,|m 


Tli objects :] (8 =) 

















Label - A variably sized amount of 
Label static text. 








Round Rect Button - Intercepts 
touch events and sends an action 
message to a target object when... 


Segmented Control - Displays 
1 2 | multiple segments, each of which 
functions as a discrete button. 





^ I ~ 


9. 创建 一 个 IBOutlet 标 签 并 命名 为 myLabel， 然 后 按 如 下 所 示 更 新 代码 并 在 
ViewController.h 里 显示 SampleProtocolDelegate 


#import &lt;UIKit/UIKit.h&gt; 
#import "SampleProtocol.h" 


Qinterface ViewController : UIViewController&lt;SampleProtocolDelet 


( 


} 
@end 


IBOutlet UILabel *myLabel; 








10. 完成 授权 方法 ， 为 SampleProtocol 创 建 对 象 和 调用 startSampleProcess 方 法 。 
如 下 所 示 ， 更 新 ViewController.m 文 件 


#import "ViewController.h" 
@interface ViewController () 
Qend 


Qimplementation ViewController 


- (void)viewDidLoad 
{ 
[super viewDidLoad]; 
SampleProtocol *sampleProtocol - [[SampleProtocol alloc]init]; 
sampleProtocol.delegate - self; 
[myLabel setText:Q"Processing..."]; 
[sampleProtocol startSampleProcess]; 
// Do any additional setup after loading the view, typically fi 
} 
- (void)didReceiveMemoryWarning 
{ 
[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 
} 


#pragma mark - Sample protocol delegate 
-(void)processCompleted{ 

[myLabel setText:@"Process Completed" ]; 
} 


Qend 





11. 将 看 到 如 下 所 示 的 输出 结果 ， 最 初 的 标签 也 会 继续 运行 ， 一 旦 授权 方法 被 
SampleProtocol 对 象 所 调用 ， 标 签 运行 程序 的 代码 也 会 更 新 。 


1:41 PM 1:41 PM 


Processing... Process Completed 





什么 是 UI 元 素 ? 


UI 元 素 是 我 们 应 用 程序 里 可 以 看 见 的 任何 可 视 元 素 ， 其 中 一 些 元 素 响 应 用 户 的 操 
作 ， 如 按钮 、 文 本 字段 ， 有 其 他 的 丰富 内 容 ， 如 图 像 、 标 签 等 。 


如 何 添 加 UI 元 素 ? 


可 以 在 界面 生成 器 的 参与 下 ， 在 代码 中 添加 UI 元 素 。 如 果 需 要 ， 我 们 可 以 使 用 他 们 
其 中 之 一 。 


我 们 关注 的 


通过 代码 ， 将 集中 于 添加 UI 元 素 到 应 用 程序 。 上 比较 简单 而 直接 的 方法 是 使 用 界面 生 
成 器 拖 放 UI 元 素 。 


方法 


以 下 我 们 通过 创建 一 款 简单 的 IOS 应 用 程序 ， 来 解释 一 些 UI 元 素 


1、 在 第 一 款 IOS 程 序 里 一 样 ， 创 建 一 个 Viewbased 应 用 程序 

、 只 更 新 ViewControllerh 和 ViewControllerm 文 件 

、 然 后 我 们 将 方法 添加 到 ViewController.m 文 件 中 来 创建 UI 元 素 

、 在 viewDidLoad 方 法 中 调用 此 方法 

、 重 要 的 代码 行 已 经 在 代码 中 通过 在 单行 上 方 标注 的 方式 进行 了 注释 


用 户 界 面 元 素 列 表 


下 面 解释 具体 的 UI 元 素 和 其 相关 的 功能 


a A C N 


utorialsPoint 4% a m X TE 


具体 的 UI 元 素 
Text Fields- 文 本 字段 
输入 类 型 -TextFields 
Buttons- 按 钮 
Label- 标 签 
Toolbar- 工 具 栏 
Status Bar- 状 态 栏 
Navigation Bar- 导 航 
栏 


Tab bar- 选 项 卡 栏 


Image View- 图 像 视 
Scroll View- 滚 动 视图 
Table View- 列 表 视 图 


IOS 分 割 视图 (Split 
View) 


Text View- 文 本 视 


View Transition -视图 
切换 


Pickers-3it1tz& 
Switches- 开 关 
IOS 滑 块 (Sliders) 
IOS 和 警告 对 话 杠 
(Alerts) 


IOS B (Icons) 


功能 
用 户 界面 元 素 ， 使 用 应 用 程序 来 获取 用 户 输入 
用 户 可 以 通过 使 用 UITextField 来 赋予 键盘 输入 属性 
用 于 处 理 用 户 操作 
用 于 显示 静态 内 容 
操纵 当前 视图 所 显示 的 东西 
显示 设备 的 关键 信息 


包含 一 个 可 以 推断 的 视图 控制 器 ， 并 弹出 导航 控制 器 
的 导航 按钮 


一 般 用 于 各 个 子 任务 、 视 图 或 同一 视图 中 的 模型 之 间 
的 切换 . 
用 于 显示 一 个 简单 的 图 像 序 列 


用 来 显示 更 多 屏幕 区 域 的 内 容 
用 于 在 多 个 行 或 部 分 中 显示 可 滚动 列表 的 数据 
用 于 在 详细 信息 窗 格 上 显示 两 个 窗 格 与 主 窗 格 的 控制 


信息 IUS 


用 于 显示 滚动 列表 的 文本 信息 可 以 被 选中 和 编辑 
各 种 视图 查看 之 间 的 切换 


用 来 显示 从 列表 中 选择 一 个 特定 的 数据 
用 作 禁 用 和 启用 操作 

用 来 允许 用 户 在 允许 的 值 范 围 内 选 对 一 个 值 
用 来 给 用 户 提 供 重 要 的 信息 


它 是 图 像 ， 表 示 用 于 行动 或 描绘 与 应 用 程序 相关 的 东 


西 
文本 字段 的 使 用 
文本 字段 是 一 个 用 户 界面 元 来 ， 通 过 应 用 程序 来 获取 用 户 输入 。 


一 个 UlTextfield 如 下 所 示 : 


重要 的 文本 字段 的 属性 


。 在 没有 任何 用 户 输 入 时 ， 显 示 占 位 符 
正常 文本 

自动 更 正 型 

键盘 类 型 

返回 键 类 型 

清除 按钮 模式 

对 齐 方式 

委托 


更 新 xib 中 的 属性 


可 以 在 Utility area (实用 区 域 ， 窗 口 的 右 侧 ) 更 改 xib 在 属性 查看 器 中 的 文本 字段 属 


o 


文本 字段 委托 


我 们 可 以 通过 右 击 UlElement 界面 生成 器 中 设置 委托 并 将 它 连 接 到 文件 的 所 有 者 ， 
如 下 所 示 : 


使 用 委托 的 步骤 : 


e 1. 设 置 委 托 如 上 图 所 示 
e 2. 添 加 委托 到 您 的 响应 类 
e 3. 执 行文 本 字段 代表 ， 重 要 的 文本 字段 代表 如 下 : 


- (void)textFieldDidBeginEditing:(UITextField *)textField 


- (void)textFieldDidEndEditing:(UITextField *)textField 


e 4. 正 如 其 名 称 所 上 暗示， 上 述 两 个 委托 分 别 叫做 编辑 的 文本 字段 和 结束 编辑 
e 5. 其 他 的 委托 请 查看 UlTextDelegate Protocol 参考 手册 。 
实例 


以 下 我 们 使 用 简单 的 实例 来 创建 UI 元 素 


ViewController 类 将 采用 UlTextFieldDelegate， 修 改 ViewController.h 文 件 ， 如 下 所 
示 : 


将 方法 addTextField 添 加 到 我 们 的 ViewControllerm 文件 
然后 在 viewDidLoad 方法 中 调用 此 方法 
在 ViewController.m 中 更 新 viewDidLoad， 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 


Qend 


Qimplementation ViewController 


- (void)viewDidLoad 


( 


j 


[super viewDidLoad]; 

//The custom method to create our textfield is called 

[self addTextField]; 

// Do any additional setup after loading the view, typically fi 


- (void)didReceiveMemoryWarning 


( 


j 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


-(void)addTextField{ 


// This allocates a label 

UILabel *prefixLabel = [[UILabel alloc]initWithFrame:CGRectZero. 
//This sets the label text 

prefixLabel.text =@"## "; 

// This sets the font for the label 

[prefixLabel setFont:[UIFont boldSystemFontOfSize:14]]; 

// This fits the frame to size of the text 

[prefixLabel sizeToFit]; 


// This allocates the textfield and sets its frame 
UITextField *textField = [[UITextField alloc] initWithFrame: 
CGRectMake(20, 50, 280, 30)]; 


// This sets the border style of the text field 
textField.borderStyle = UITextBorderStyleRoundedRect; 
textField.contentVerticalAlignment = 
UIControlContentVerticalAlignmentCenter; 

[textField setFont:[UIFont boldSystemFontOfSize:12]]; 


//Placeholder text is displayed when no text is typed 
textField.placeholder - Q"Simple Text field"; 


//Prefix label is set as left view and the text starts after th: 
textField.leftView - prefixLabel; 


//It set when the left prefixLabel to be displayed 
textField.leftViewMode - UITextFieldViewModeAlways; 


// Adds the textField to the view. 
[self.view addSubview:textField]; 


// sets the delegate to the current class 
textField.delegate - self; 


j 


// pragma mark is used for easy access of code in Xcode 
#pragma mark - TextField Delegates 


// This method is called once we click inside the textField 
-(void)textFieldDidBeginEditing: (UITextField *)textField{ 
NSLog(@"Text field did begin editing"); 


// This method is called once we complete editing 
-(void)textFieldDidEndEditing:(UITextField *)textField{ 
NSLog(@"Text field ended editing"); 


// This method enables or disables the processing of return key 
-(BOOL) textFieldShouldReturn:(UITextField *)textField{ 
[textField resignFirstResponder ]; 
return YES; 


- (void)viewDidUnload { 
label = nil; 
[super viewDidUnload]; 


j 

Qend 
LN 
运行 该 应 用 程序 会 看 到 下 面 的 输出 





委托 调用 的 方法 基于 用 户 操 作 。 要 知道 调用 委托 时 请 参阅 控制 台 输出 。 


为 什么 使 用 不 同 的 输入 类 型 ? 


键盘 输入 的 类 型 帮助 我 们 从 用 户 获取 必需 的 输入 。 


它 移 除 不 需要 的 键 ， 并 包括 所 需 的 部 分 。 用 户 可 以 通过 使 用 UITextField Ait & f 
性 设置 输入 的 类 型 。 


e 如 : 文本 字段 (textField) > keyboardType = UlKeyboardTypeDefault 


键盘 输入 类 型 
输入 的 类 型 Hh 
键盘 包括 所 有 标准 的 ASCI 字 


do 


UlKeyboardTypeASCIICapable 


UlKeyboardTypeNumbersAndPunctuation ”键盘 显示 数字 和 标点 。 
UIKeyboardTypeURL 键盘 的 URL 项 优化 。 


键盘 用 于 PIN 输入 和 显示 一 个 数 
Frå. 


键盘 对 输入 电话 号 码 进 行 了 优 


o 


UlKeyboardTypeNamePhonePad ht FH dq AGEE S SIE. 
键盘 对 输入 电子 邮件 地 址 的 优 
1 


o 


UlKeyboardTypeNumberPad 


UlKeyboardTypePhonePad 


UlKeyboardTypeEmailAddress 


UlKeyboardTypeDecimalPad 键盘 用 来 输入 十 进 制 数 字 。 
UIKeyboardTypeTwitter bh i xt twitter @ 和 # 符 号 进行 了 
Libo 


添加 自 定义 方法 addTextFieldWithDifferentKeyboard 


-(void) addTextFieldWithDifferentKeyboard( 


UITextField *textFieldi= [[UITextField alloc]initWithFrame: 
CGRectMake(20, 50, 280, 30)]; 

textFieldi.delegate - self; 

textFieldi.borderStyle = UITextBorderStyleRoundedRect; 
textFieldi.placeholder = @"Default Keyboard"; 

[self.view addSubview:textField1]; 


UITextField *textField2 = [[UITextField alloc]initWithFrame: 
CGRectMake(20, 100, 280, 30)]; 

textField2.delegate = self; 

textField2.borderStyle = UITextBorderStyleRoundedRect; 
textField2.keyboardType = UIKeyboardTypeASCIICapable; 
textField2.placeholder = @"ASCII keyboard"; 

[self.view addSubview:textField2]; 


UITextField *textField3 = [[UITextField alloc]initWithFrame: 
CGRectMake(20, 150, 280, 30)]; 

textField3.delegate = self; 

textField3.borderStyle = UITextBorderStyleRoundedRect; 
textField3.keyboardType = UIKeyboardTypePhonePad; 
textField3.placeholder = @"Phone pad keyboard"; 

[self.view addSubview:textField3]; 


UITextField *textField4 = [[UITextField alloc]initWithFrame: 
CGRectMake(20, 200, 280, 30)]; 

textField4.delegate = self; 

textField4.borderStyle = UITextBorderStyleRoundedRect; 
textField4.keyboardType = UIKeyboardTypeDecimalPad; 
textField4.placeholder = @"Decimal pad keyboard"; 

[self.view addSubview:textField4]; 


UITextField *textField5- [[UITextField alloc]initWithFrame: 
CGRectMake(20, 250, 280, 30)]; 

textField5.delegate - self; 

textField5.borderStyle - UITextBorderStyleRoundedRect; 
textField5.keyboardType = UIKeyboardTypeEmailAddress; 
textField5.placeholder = @"Email keyboard"; 

[self.view addSubview:textField5]; 


UITextField *textField6- [[UITextField alloc]initWithFrame: 
CGRectMake(20, 300, 280, 30)]; 

textField6.delegate - self; 

textField6.borderStyle - UITextBorderStyleRoundedRect; 
textField6.keyboardType - UIKeyboardTypeURL; 
textField6.placeholder = @"URL keyboard"; 

[self.view addSubview:textField6]; 


f£ ViewController.m 中 更 新 viewDidLoad, #0 FATA 


(void)viewDidLoad 
{ 
[super viewDidLoad]; 
//The custom method to create textfield with different keyboard 
[self addTextFieldWithDifferentKeyboard]; 
//Do any additional setup after loading the view, typically fror 
} 


«| = 








输出 


现在 当 我 们 运行 应 用 程序 时 我 们 就 会 得 到 下 面 的 输出 : 


选择 不 同 的 文本 区 域 我 们 将 看 到 不 同 的 键 瘟 。 


按钮 使 用 


按钮 用 于 处 理 用 户 操作 。 它 截取 触摸 事件 ， 并 将 消息 发 送 到 目标 对 象 。 


A A BTR 


在 xib 中 的 按钮 属性 


您 可 以 在 Utility area (实用 区 域 ， 窗 口 的 右 侧 ) 的 属性 检查 器 的 更 改 xib 按钮 属 


l 
o 


按钮 类 型 


UIButtonTypeCustom 
UIButton TypeRoundedRect 
UlButtonTypeDetailDisclosure 
UlButtonTypelnfoLight 
UlButtonTypelnfoDark 
UlButtonTypeContactAdd 


重要 的 属性 


e imageView 
e titleLabel 


重要 的 方法 


+ (id)buttonwithType: (UIButtonType)buttonType 


- (UIImage *)backgroundImageForState: (UIControlState)state 


- (UIImage *)imageForState:(UlControlState)state 


- (void)setTitle:(NSString *)title forState:(UIControlState)state 
LS NCC]: i 

- (void)addTarget:(id)target action:(SEL)action forControlEvents: | 
| ————P—————— cm Ó 


添加 自 定义 方法 addDifferentTypesOfButton 





-(void)addDifferentTypesOfButton 


( 


// A rounded Rect button created by using class method 
UIButton *roundRectButton - [UIButton buttonwithType: 
UIButtonTypeRoundedRect ] ; 

[roundRectButton setFrame:CGRectMake(60, 50, 200, 40)]; 

// sets title for the button 

[roundRectButton setTitle:@"Rounded Rect Button" forState: 
UIControlStateNormal ] ; 

[self.view addSubview:roundRectButton]; 


UIButton *customButton = [UIButton buttonwithType: UIButtonType 
[customButton setBackgroundColor: [UIColor lightGrayColor]]; 
[customButton setTitleColor:[UIColor blackColor] forState: 
UIControlStateHighlighted ] ; 

//sets background image for normal state 

[customButton setBackgroundImage: [UIImage imageNamed: 

Q"Button Default.png"] 

forState:UIControlStateNormal]; 

//sets background image for highlighted state 

[customButton setBackgroundImage:[UIImage imageNamed: 

Q"Button Highlighted.png"] 

forState:UIControlStateHighlighted]; 

[customButton setFrame:CGRectMake(60, 100, 200, 40)]; 
[customButton setTitle:@"Custom Button" forState:UIControlState 
[self.view addSubview:customButton]; 


UIButton *detailDisclosureButton = [UIButton buttonWithType: 
UIButtonTypeDetailDisclosure]; 

[detailDisclosureButton setFrame:CGRectMake(60, 150, 200, 40)], 
[detailDisclosureButton setTitle:@"Detail disclosure" forState 
UIControlStateNormal]; 

[self.view addSubview:detailDisclosureButton]; 


UIButton *contactButton - [UIButton buttonWithType: 
UIButtonTypeContactAdd]; 

[contactButton setFrame:CGRectMake(60, 200, 200, 40)]; 
[self.view addSubview:contactButton]; 


UIButton *infoDarkButton = [UIButton buttonWithType: 
UIButtonTypeInfoDark]; 

[infoDarkButton setFrame:CGRectMake(60, 250, 200, 40)]; 
[self.view addSubview:infoDarkButton]; 


UIButton *infoLightButton = [UIButton buttonwithType: 
UIButtonTypeInfoLight]; 

[infoLightButton setFrame:CGRectMake(60, 300, 200, 40)]; 
[self.view addSubview:infoLightButton]; 











MN N 
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我 们 将 命名 为 "Button_Default.png" 和 "Button_Highlighted.png" 的 个 图 像 添 加 到 我 们 
的 项 目 ， 可 以 通过 将 图 像 拖 到 列 出 了 我 们 的 项 目 文件 的 导航 区 域 来 完成 。 


在 ViewController.m 中 更 新 viewDidLoad， 如 下 所 示 


(void)viewDidLoad 
{ 
[super viewDidLoad]; 
//The custom method to create our different types of button is 
[self addDifferentTypesOfButton]; 
//Do any additional setup after loading the view, typically fr 





输出 


现在 当 我 们 运行 应 用 程序 时 我 们 就 会 得 到 下 面 的 输出 : 


标签 的 使 用 
标签 用 于 显示 静态 内 容 ， 包 括 单独 的 一 行 或 多 行 。 
重要 的 属性 


textAlignment 
textColor 

text 
numberOflines 
lineBreakMode 


添加 目 定 义 方法 addLabel 


-(void)addLabel{ 
UILabel *aLabel = [[UILabel alloc]initWithFrame: 
CGRectMake(20, 200, 280, 80)]; 
aLabel.numberOfLines = 0; 
aLabel.textColor = [UIColor blueColor]; 
aLabel.backgroundColor = [UIColor clearColor]; 
aLabel.textAlignment = UITextAlignmentCenter; 
aLabel.text = @"This is a sample text\n of multiple lines. 
here number of lines is not limited."; 
[self.view addSubview:aLabel]; 


f£ ViewController.m 中 更 新 viewDidLoad， 如 下 所 示 : 


- (void)viewDidLoad 


[super viewDidLoad]; 

//The custom method to create our label is called 

[self addLabel]; 

// Do any additional setup after loading the view, typically fi 





输出 


运行 应 用 程序 ， 就 会 得 到 下 面 的 输出 : 


工具 栏 的 使 用 


我 们 可 以 使 用 工具 栏 修改 视图 元 素 。 
如 ， 邮 件 应 用 程序 里 的 收 件 箱 栏 中 有 了 删除、 分 享 、 答 复 等 等 。 如 下 所 示 : 


重要 的 属性 


e barStyle 
e items 


添加 自 定义 方法 addToolbar 


-(void)addToolbar 


( 


UIBarButtonItem *spaceItem = [[UIBarButtonItem alloc] 
initwithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace 
target:nil action:nil]; 

UIBarButtonItem *customItem1 = [[UIBarButtonItem alloc] 
initWithTitle:@"Tooli" style:UIBarButtonItemStyleBordered 
target:self action:@selector(toolBarItemt: )]; 
UIBarButtonItem *customItem2 = [[UIBarButtonItem alloc] 
initWithTitle:Q"Tool2" style:UIBarButtonItemStyleDone 
target:self action:@selector(toolBarItem2: )]; 

NSArray *toolbarItems = [NSArray arrayWithObjects: 
customItem1,spaceItem, customItem2, nil]; 

UIToolbar *toolbar = [[UIToolbar alloc]initWithFrame: 
CGRectMake(0, 366-54, 320, 50)]; 

[toolbar setBarStyle:UIBarStyleBlackOpaque]; 

[self.view addSubview:toolbar]; 

[toolbar setItems:toolbarItems]; 


剧本 aE 


为 了 解 所 执行 的 操作 我 们 在 我 们 的 ViewController.xib 中 添加 UlLabel lboutlet 并 为 
UlLabel 创建 命名 为 标签 的 IBoutlet。 


我 们 还 需要 添加 两 个 方法 来 执行 ， 如 下 所 示 的 工具 栏 项 的 操作 : 


- (IBAction)toolBarItem1: (id)sendert{ 


} 


[label setText:@"Tool 1 Selected"]; 


- (IBAction)toolBarItem2: (id)sender{ 


} 


[label setText:@"Tool 2 Selected"]; 


在 ViewController.m 中 更 新 viewDidLoad, #0 FATA: 


- (void)viewDidLoad 


[super viewDidLoad]; 

// The method hideStatusbar called after 2 seconds 

[self addToolbar]; 

// Do any additional setup after loading the view, typically fi 





现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 。 


单 击 我 们 得 到 的 tool1 和 tool2 栏 按钮 


状态 栏 的 使 用 


状态 栏 显示 设备 的 关键 信息 。 


设备 模型 或 网 络 提供 商 
网 络 信号 强度 
电池 使 用 量 

时 间 


状态 栏 如 下 所 示 : 


隐藏 状态 栏 的 方法 


[[UIApplication sharedApplication] setStatusBarHidden:YES]; 
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我 们 还 可 以 通过 添加 行 ， 并 在 info.plist 的 帮助 下 选择 UlStatusBarHidden 隐藏 状态 
栏 ， 并 使 其 值 为 否 (NO). 


在 类 中 添加 自 定义 方法 hideStatusbar 


它 隐 藏 状态 栏 进行 动画 处 理 ， 并 也 调整 我 们 认为 占据 状态 栏 空间 的 大 小 。 


-(void)hideStatusbar { 
[[UIApplication sharedApplication] setStatusBarHidden: YES 
withAnimation:UIStatusBarAnimationFade]; 
[UIView beginAnimations:Q"Statusbar hide" context:nil]; 
[UIView setAnimationDuration:0.5]; 
[self.view setFrame:CGRectMake(0, 0, 320, 480)]; 
[UIView commitAnimations]; 


f£ ViewController.m 中 更 新 viewDidLoad， 如 下 所 示 : 


- (void)viewDidLoad 


[super viewDidLoad]; 

// The method hideStatusbar called after 2 seconds 

[self performSelector:Qselector(hideStatusbar) 

withObject:nil afterDelay:2.0]; 

// Do any additional setup after loading the view, typically fi 


} 
1 








初始 输出 以 及 2 秒 后 输出 


IOS 导 航 栏 的 使 用 
导航 栏 包含 导航 控制 器 的 导航 的 按钮 。 在 导航 栏 中 的 标题 是 当前 视图 控制 器 的 标 


是 。 


示例 代码 和 步 台 C 


1. 创 视图 应 用 程序 
1. 现在 ， 选 择 应 用 程序 Delegate.h ， 添 加 导航 控制 器 的 属性 ， 如 下 所 示 : 
#import <UIKit/UIKit.h> 
Qclass ViewController; 
Qinterface AppDelegate : UIResponder <UIApplicationDelegate> 
@property (strong, nonatomic) UIWindow *window; 
Qproperty (strong, nonatomic) ViewController *viewController; 
@property (strong, nonatomic) UINavigationController *navControllei 
Qend 

e c -——————————————X—— ———— 5] 


3. 更 新 应 用 程序 : didFinishLaunchingWithOptions:75;&, TEAppDelegate.mX fF 23 
配 的 导航 控制 器 ， 并 使 其 成 为 窗口 的 根 视图 控制 器 ， 如 下 所 示 : 





- (BOOL)application: (UIApplication *)application didFinishLaunchin‘ 


} 


4o ëR 


4. 现 在 ， 


self.window = [[UIWindow alloc] initWithFrame: 

[[UIScreen mainScreen] bounds] ]; 

// Override point for customization after application launch. 
self.viewController = [[ViewController alloc] 
initWithNibName:@"ViewController" bundle:nil]; 

//Navigation controller init with ViewController as root 
UINavigationController *navController = [[UINavigationControlle 
initWithRootViewController:self.viewController]; 

self .window.rootViewController = navController; 

[self.window makeKeyAndVisible]; 

return YES; 





通过 选择 File -> New ->File... -> Objective C Class 添加 新 的 类 文件 


TempViewController， 然 后 将 类 命名 TempViewController 与 UlViewController 的 


类 。 


5. 在 ViewController.h 中 添加 navButon， 如 下 所 示 


// ViewController.h 
#import <UIKit/UIKit.h> 


@interface ViewController : UIViewController 


{ 
} 


@end 


UIButton *navButton; 


6. 现 在 添加 方法 addNavigationBarltem 并 在 viewDidLoad 调 用 方法 

7. 为 导航 项 创建 方法 

1. 我 们 还 需要 创建 另 一 种 方法 到 另 一 视图 控制 器 TempViewController。 
2. 更 新 后 的 ViewController.m， 如 下 所 示 : 


«| 


// MiewController.m 

#import "ViewController.h" 
#import "TempViewController.h" 
Qinterface ViewController () 


Qend 
Qimplementation ViewController 


- (void)viewDidLoad 


j 


[super viewDidLoad]; 
[self addNavigationBarButton]; 
//Do any additional setup after loading the view, typically fr 


- (void)didReceiveMemoryWarning 


j 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


- (IBAction)pushNewView:(id)sender( 


j 


TempViewController *tempVC -[[TempViewController alloc] 
initWithNibName:Q"TempViewController" bundle:nil]; 
[self.navigationController pushViewController:tempVC animated: YI 


-(IBAction)myButtonClicked:(id)sender( 


j 


// toggle hidden state for navButton 
[navButton setHidden: nav.hidden]; 


-(void)addNavigationBarButton{ 


} 


UIBarButtonItem *myNavBtn = [[UIBarButtonItem alloc] initWithTil 
@"MyButton" style:UIBarButtonItemStyleBordered target: 
self action:Qselector(myButtonClicked:)]; 


[self.navigationController.navigationBar setBarStyle:UIBarStylet 
[self.navigationlItem setRightBarButtonItem:myNavBtn]; 


// create a navigation push button that is initially hidden 
navButton = [UIButton buttonWwithType:UIButtonTypeRoundedRect]; 
[navButton setFrame:CGRectMake(60, 50, 200, 40)]; 

[navButton setTitle:@"Push Navigation" forState:UIControlStateN( 
[navButton addTarget:self action:Qselector(pushNewView:) 
forControlEvents:UIControlEventTouchUpInside]; 

[self.view addSubview:navButton]; 

[navButton setHidden:YES]; 


Qend 











1. 现在 当 我 们 运行 应 用 程序 时 我 们 就 会 得 到 下 面 的 输出 


1. 单 击 MyButton 导航 按钮 ， 切 换 导 航 按钮 可 见 性 
2. 单 击 导 航 按钮 ， 显 示 另 一 个 视图 控制 器 ， 如 下 所 示 


IOS 选 项 卡 栏 的 使 用 


它 一 般 用 于 在 同一 视图 中 各 个 子 任务 、 视图 或 的 模型 之 间 切 换 。 
选项 卡 栏 的 示例 如 下 所 示 : 


重要 的 属性 


e backgroundlmage 
e items 
e selecteditem 


示例 代码 和 步骤 


1. 创建 一 个 新 的 项 目 ， 选 择 Tabbed Application 替代 视图 应 用 程序 ,点 击 下 一 步 ， 
输入 项 目 名 称 和 选择 create. 


1. 这 里 默认 创建 两 个 视图 控制 器 和 标签 栏 添加 到 我 们 的 应 用 程序 。 
3. AppDelegate.m didFinishLaunchingWithOptions 方 法 如 下 : 


- (BOOL)application: (UIApplication *)application didFinishLaunchin' 
{ 


self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mains: 
bounds] ]; 

// Override point for customization after application launch. 
UIViewController *viewController1 = [[FirstViewController alloc 
initwithNibName:Q"FirstViewController" bundle:nil]; 
UIViewController *viewController2 = [[SecondViewController all 
initWithNibName:@"SecondViewController" bundle:nil]; 
self.tabBarController - [[UITabBarController alloc] init]; 
self.tabBarController.viewControllers = @[viewControlleri, 
viewController2]; 

self .window.rootViewController = self.tabBarController; 

[self .window makeKeyAndVisible]; 

return YES; 








1. 两 个 视图 控制 器 被 用 来 分 配 作 为 选项 卡 栏 控制 器 的 视图 控制 器 
2. 运行 应 用 程序 ,得 到 如 下 结果 : 


图 像 视图 的 使 用 

图 像 视图 用 于 显示 单个 图 像 或 动画 序列 的 图 像 。 
重要 的 属性 

image 

highlightedlmage 

userlnteractionEnabled 


animationlmages 
animationRepeatCount 


重要 的 方法 


- (id)initWithImage:(UIImage *)image 


- (id)initWithImage:(UIImage *)image highlightedImage: 
(UIImage *)highlightedImage 


- (void)startAnimating 


- (void)stopAnimating 


添加 自 定 义 方 法 addimageView 


- (void)addImageViewt{ 
UIImageView *imgview = [[UIImageView alloc] 
initwWithFrame:CGRectMake(10, 10, 300, 400)]; 
[imgview setlImage:[UIImage imageNamed:Q"AppleUSA1.jpg"]]; 
[imgview setContentMode:UIViewContentModeScaleAspectFit]; 
[self.view addSubview:imgview]; 


添加 另 一 个 自 定义 方法 addlmageViewWithAnimation 


这 种 方法 解释 了 如 何 对 imageView 中 的 图 像 进行 动画 义理 


- (void)addImageViewwWithAnimation( 
UIImageView *imgview - [[UIImageView alloc] 
initwWithFrame:CGRectMake(10, 10, 300, 400)]; 
// set an animation 
imgview.animationImages = [NSArray arrayWithObjects: 
[UIImage imageNamed:Q"AppleUSA1.jpg"], 
[UIImage imageNamed:Q"AppleUSA2.jpg"], nil]; 
imgview.animationDuration - 4.0; 
imgview.contentMode = UIViewContentModeCenter ; 
[imgview startAnimating]; 
[self.view addSubview: imgview ] ; 


注意 : 我 们 必须 添加 命名 为 "AppleUSA1.jpg" 和 "AppleUSA2.jpg" 到 我 们 的 项 目 ， 可 
以 通过 将 图 像 拖 到 我 们 导航 区 域 ， 其 中 列 出 了 我 们 的 项 目 文件 所 做 的 图 像 。 


在 ViewController.m 中 更 新 viewDidLoad, #0 FATA 


(void)viewDidLoad 


i 
[super viewDidLoad]; 
[self addImageView]; 


滚动 视图 的 使 用 

如 果 内 容 超 出 屏幕 的 大 小 就 会 使 用 到 滚动 视图 来 显示 隐藏 的 部 分 。 

它 可 以 包含 所 有 的 其 他 用 户 界面 元 素 如 图 像 视 图 、 标签 、 文本 视图 甚至 另 一 个 滚 
动 视 图 。 

重要 的 属性 


contentSize 
contentlnset 
contentOffset 
delegate 


重要 的 方法 


- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated 


- (void)setContentOffset:(CGPoint)contentOffset animated: (BOOL)anir 


«| m 








重要 的 委托 方法 


在 ViewControllerh 中 ， 加 入 <uiscrollviewdelegate> 滚 动 视 图 和 声明 滚动 视图 让 类 符 
合 委托 协议 ， 如 下 所 示 :</uiscrollviewdelegate> 


#import «UIKit/UIKit.h» 


Qinterface ViewController : UIViewController<UIScrollViewDelegate> 


( 


} 

@end 
| 
添加 自 定 义 方 法 addScrollView 


UIScrollView *myScrollView; 


-(void)addScrollView{ 
myScrollView = [[UIScrollView alloc]initWithFrame: 
CGRectMake(20, 20, 280, 420)]; 
myScrollView.accessibilityActivationPoint = CGPointMake(100, 1( 
imgView = [[UIImageView alloc]initWithImage: 
[UIImage imageNamed:Q"AppleUSA.jpg"]]; 
[myScrollView addSubview:imgView]; 
myScrollView.minimumZoomScale = 0.5; 
myScrollView.maximumZoomScale = 3; 
myScrollView.contentSize = CGSizeMake(imgView.frame.size.width, 
imgView.frame.size.height); 
myScrollView.delegate - self; 
[self.view addSubview:myScrollView]; 


) 
snc — —— —X—A— 


注意 : 我 们 必须 添加 一 个 命名 为 "AppleUSA1.jpg" 到 我 们 的 项 目 ， 可 以 通过 将 图 像 
TES d RE 其 中 列 出 了 我 们 的 项 目 文件 所 做 的 图 像 。 图 像 应 高 于 设备 的 高 





NA, 


as 


ViewController.m 中 实现 scrollView 委托 


-(UIView *)viewForZoomingInScrollView: (UIScrollView *)scrollView{ 
return imgView; 
j 


-(void)scrollViewDidEndDecelerating:(UlScrollView *)scrollView{ 
NSLog(@"Did end decelerating"); 


-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ 
// NSLog(Q"Did scroll"); 


-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView 
willDecelerate: (BOOL)decelerate{ 
NSLog(@"Did end dragging"); 


-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{ 
NSLog(@"Did begin decelerating"); 


-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{ 
NSLog(@"Did begin dragging"); 


-| 
在 ViewController.m 中 更 新 viewDidLoad， 如 下 所 示 


(void)viewDidLoad 


i 
[super viewDidLoad]; 
[self addScrollView]; 
//Do any additional setup after loading the view, typically fror 





} 
E 
输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 。 滚动 滚动 视图 ， 将 能 够 查 
看 图 像 的 其 余部 分 : 


表格 视图 的 使 用 


IOS 表 格 视图 由 单元 格 (一 般 可 重复 使 用 ) 组 成 ， 用 于 显示 垂直 滚动 的 视图 。 
TIOS 中 ,表格 视图 用 于 显示 数据 列表 ,如 联系 人 、 待 办 事项 或 购物 项 列表 。 


重要 的 属性 


delegate 

dataSource 
rowHeight 
sectionFooterHeight 
sectionHeaderHeight 
separatorColor 
tableHeaderView 
tableFooterView 


重要 的 方法 


- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPatl 
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- (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths 
withRowAnimation: (UITableViewRowAnimation) animation 


- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier 


- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier 
forIndexPath:(NSIndexPath *)indexPath 


- (void)reloadData 


- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths 
withRowAnimation:(UITableViewRowAnimation)animation 


- (NSArray *)visibleCells 


ZI SIZE 


1. 在 ViewController.xib 中 添加 表格 视图 ， 如 下 所 示 


2. 通过 右键 单 击 并 选择 数据 源 和 委托 将 委托 和 数据 源 设 定 到 "File's Owner (文件 的 
所 有 者 ) "。 设 置 数 据 源 如 下 所 示 


3. 为 表格 视图 创建 IBOutlet 的 并 将 其 命名 为 myTableView。 如 以 下 图 片 中 所 示 


4. 为 拥有 数据 ， 添 加 一 个 NSMutableArray 使 其 能 够 在 列表 格 视图 中 显示 


5.ViewController 5 3€ FH BYUITableViewDataSource#1UITableViewDelegate i+ iN. 
ViewController.h 代 码 如 下 所 示 


#import <UIKit/UIKit.h> 


Qinterface ViewController : UIViewController«UITableViewDataSource, 
UITableViewDelegate> 


{ 


IBOutlet UITableView *myTableView; 
NSMutableArray *myData; 


} 

Qend 
LEN. u 
6. 执 行 所 需 的 表格 视图 委托 和 数据 源 的 方法 。 更 新 ViewControllerm， 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 


Qimplementation ViewController 


- (void)viewDidLoad 
{ 
[super viewDidLoad]; 
// table view data is being set here 
myData = [[NSMutableArray alloc]initWithObjects: 
@"Data 1 in array",Q"Data 2 in array",Q"Data 3 in array", 
@"Data 4 in array",Q"Data 5 in array",Q"Data 5 in array", 
@"Data 6 in array",Q"Data 7 in array",Q"Data 8 in array", 
Q"Data 9 in array", nil]; 
// Do any additional setup after loading the view, typically fi 
} 
- (void)didReceiveMemoryWarning 
{ 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


#pragma mark - Table View Data source 
- (NSInteger)tableView:(UlTableView *)tableView numberOfRowsInSect: 
(NSInteger )section{ 
return [myData count]/2; 


j 
- (UITableViewCell *)tableView: (UITableView *)tableView cellForRow/ 
(NSIndexPath *)indexPath{ 
static NSString *cellIdentifier = @"cellID"; 
UITableViewCell *cell = [tableView dequeueReusableCellwithIdent 
celllIdentifier]; 
if (cell -- nil) ( 
cell = [[UITableViewCell alloc]initWwithStyle: 
UITableViewCellStyleDefault reuseIdentifier:celllIdentifier: 
} 
NSString *stringForCell; 
if (indexPath.section -- 0) ( 
stringForCell- [myData objectAtIndex:indexPath.row]; 
else if (indexPath.section -- 1)( 
stringForCell- [myData objectAtIndex:indexPath.row+ [myDat: 
} 
[cell.textLabel setText:stringForCell]; 
return cell; 
j 


// Default is 1 if not implemented 

- (NSInteger )numberOfSectionsInTableView: (UITableView *)tableView{ 
return 2; 

j 


- (NSString *)tableView: (UITableView *)tableView titleForHeaderInS: 
(NSInteger )section{ 
NSString *headerTitle; 
if (section==0) { 
headerTitle = @"Section 1 Header"; 
j 


else{ 
headerTitle = @"Section 2 Header"; 


} 


return headerTitle; 
} 
- (NSString *)tableView: (UITableView *)tableView titleForFooterInS: 
(NSInteger )section{ 
NSString *footerTitle; 
if (section==0) { 
footerTitle = @"Section 1 Footer"; 
} 


else{ 
footerTitle = @"Section 2 Footer"; 


return footerTitle; 


j 
#pragma mark - TableView delegate 


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: 
(NSIndexPath *)indexPath{ 
[tableView deselectRowAtIndexPath:indexPath animated:YES]; 
UITableViewCell *cell - [tableView cellForRowAtIndexPath:indext 
NSLog(@"Section:%d Row:%d selected and its data is %@", 
indexPath.section,indexPath.row,cell.textLabel.text); 


} 
@end 
[E] aa aa Fp 





7. 现 在 当 我 们 运行 应 用 程序 时 我 们 就 会 得 到 下 面 的 输出 


分 割 视图 的 使 用 


分 割 视图 是 iPad 的 特定 视图 控制 器 用 于 管理 两 个 视图 控制 器 ， 在 左 侧 是 一 个 主 控 
制 器 ， 其 右 侧 是 一 个 详细 信息 视图 控制 器 。 重要 的 属性 
e delegate 


e viewControllers 
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1. 创 建 一 个 新 项 目 ， 选 择 Master Detail Application 并 单 击 下 一 步 ， 输 入 项 目 名 称 ， 
然后 选择 创建 。 


2. 简 单 的 分 割 视图 控制 器 与 母 版 中 的 表 视 图 是 默认 创建 的 。 
3. 在 这 里 我 们 为 我 们 创建 的 下 列 文件 。 


AppDelegate.h 
AppDelegate.m 
DetailViewController.h 
DetailViewController.m 
DetailViewController.xib 
MasterViewController.h 
MasterViewController.m 
MasterViewController.xib 


4. AppDelegate.h 文 件 如 下 所 示 


#import <UIKit/UIKit.h> 

@interface AppDelegate : UIResponder <UIApplicationDelegate> 
Qproperty (strong, nonatomic) UIWindow *window; 

Qproperty (strong, nonatomic) UISplitViewController *splitViewConti 


@end 








5. 在 AppDelegate.m 中 的 didFinishLaunchingWithOptions 方 法 ， 如 下 所 示 


- (BOOL)application:(UIApplication *)application 
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
self.window = [[UIWindow alloc] initwithFrame:[[UIScreen mainSc! 
bounds]]; 

// Override point for customization after application launch. 
MasterViewController *masterViewController = [[MasterViewContrt: 
alloc] initWithNibName:@"MasterViewController" bundle:nil]; 
UINavigationController *masterNavigationController = 
[[UINavigationController alloc] initWithRootViewController: 
masterViewController]; 


DetailViewController *detailViewController - 
[[DetailViewController alloc] initWwithNibName:Q"DetailViewCont! 
bundle:nil]; 

UINavigationController *detailNavigationController - 
[[UINavigationController alloc] initWithRootViewController: 
detailViewController]; 


masterViewController.detailViewController = detailViewControlle 


self.splitViewController = [[UISplitViewController alloc] init: 
self.splitViewController.delegate - detailViewController; 
self.splitViewController.viewControllers - 
Q[masterNavigationController, detailNavigationController]; 
self.window.rootViewController - self.splitViewController; 
[self.window makeKeyAndVisible]; 

return YES; 





6. MasterViewController.h, #0 FFAIR 


#import «UIKit/UIKit.h» 

@class DetailViewController; 

Qinterface MasterViewController : UITableViewController 

Qproperty (strong, nonatomic) DetailViewController *detailViewConti 


Qend 


«| m 








7. MasterViewController.m, #0 FF/rzs 


#import "MasterViewController.h" 
#import "DetailViewController.h" 


Qinterface MasterViewController () ( 
NSMutableArray * objects; 


} 
@end 


@implementation MasterViewController 


- (id)initWithNibName:(NSString *)nibNameOrNil bundle: (NSBundle *) 
nibBundleOrNil 
{ 
self = [Super initWithNibName:nibNameOrNil bundle: nibBundleOrN: 
if (self) { 
self.title - NSLocalizedString(Q"Master", Q"Master"); 
self.clearsSelectionOnViewwillAppear = NO; 
self.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0: 
} 


return self; 


} 
- (void)viewDidLoad 


[super viewDidLoad]; 
self.navigationItem.leftBarButtonlItem = self.editButtonItem; 


UIBarButtonItem *addButton = [[UIBarButtonItem alloc] 
initWithBarButtonSystemItem: UIBarButtonSystemItemAdd 
target:self action:@selector(insertNewObject: )]; 

self .navigationItem.rightBarButtonItem = addButton; 


} 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


j 
- (void)insertNewObject: (id)sender 


if (! objects) ( 
objects = [[NSMutableArray alloc] init]; 
} 


[ objects insertObject:[NSDate date] atIndex:0]; 

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSect: 
[self.tableView insertRowsAtIndexPaths:@[ indexPath] withRowAnir 
UITableViewRowAnimationAutomatic]; 


j 
#pragma mark - Table View 
- (NSInteger )numberOfSectionsInTableView: (UITableView *)tableView 


return 1; 


j 


- (NSInteger)tableView:(UlTableView *)tableView numberOfRowsInSect: 
(NSInteger)section 


i 
} 


return _objects.count; 


// Customize the appearance of table view cells. 
- (UITableViewCell *)tableView: (UITableView *)tableView cellForRow/ 
(NSIndexPath *)indexPath 


{ 
static NSString *CellIdentifier = @"Cell"; 


UITableViewCell *cell = [tableView dequeueReusableCellwithIdent 
CellIdentifier]; 
if (cell == nil) { 
cell = [[UITableViewCell alloc] initWithStyle: 
UITableViewCellStyleDefault reuseIdentifier:CelllIdentifier: 
j 


NSDate *object = _objects[indexPath.row]; 
cell.textLabel.text - [object description]; 
return cell; 


(BOOL)tableView: (UITableView *)tableView canEditRowAtIndexPath: 
(NSIndexPath *)indexPath 


// Return NO if you do not want the specified item to be edital 
return YES; 


- (void)tableView:(UlTableView *)tableView commitEditingStyle: 
(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath: 


(NSIndexPath *)indexPath 
{ 

if (editingStyle == UITableViewCellEditingStyleDelete) { 
[ objects removeObjectAtIndex:indexPath.row]; 
[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnim: 
UITableViewRowAnimationFade]; 

) else if (editingStyle == UITableViewCellEditingStyleInsert) : 
// Create a new instance of the appropriate class, insert : 
//the array, and add a new row to the table view. 


j 


/* 

// Override to support rearranging the table view. 

- (void)tableView:(UlTableView *)tableView moveRowAtIndexPath: 
(NSIndexPath *) fromIndexPath tolIndexPath:(NSIndexPath *)toIndext 


{ 
} 
P 
Vas 
// Override to support conditional rearranging of the table view. 


- (BOOL)tableView: (UITableView *)tableView canMoveRowAtIndexPath: 
(NSIndexPath *)indexPath 


// Return NO if you do not want the item to be re-orderable. 
return YES; 


} 

d 

- (void)tableView: (UITableView *)tableView didSelectRowAtIndexPath 

(NSIndexPath *)indexPath 

{ 
NSDate *object = _objects[indexPath.row]; 
self.detailViewController.detailltem = object; 
NSDateFormatter *formatter - [[NSDateFormatter alloc] init]; 
[formatter setDateFormat: @"yyyy-MM-dd HH:mm:ss zzz"]; 
NSString *stringFromDate = [formatter stringFromDate:object]; 
self .detailViewController.detailDescriptionLabel.text = string 

} 





8. DetailViewController.h ， 如 下 所 示 


#import «UIKit/UIKit.h» 


@interface DetailViewController : UIViewController 
«UISplitViewControllerDelegate- 


@property (strong, nonatomic) id detailItem; 


@property (weak, nonatomic) IBOutlet UILabel *detailDescriptionLabe 
@end 


‘ aT 


a 








9. DetailViewController.m ， 如 下 所 示 


#import "DetailViewController.h" 

Qinterface DetailViewController () 

@property (strong, nonatomic) UIPopoverController *masterPopoverCor 
- (void)configureView; 

@end 

@implementation DetailViewController 

#pragma mark - Managing the detail item 


- (void)setDetailltem:(id)newDetailltem 


if (_detailItem != newDetailltem) { 
_detailItem = newDetailltem; 


// Update the view. 
[self configureView] ; 


} 
if (self.masterPopoverController !- nil) { 
[self.masterPopoverController dismissPopoverAnimated:YES]; 
} 
} 
- (void)configureView 
// Update the user interface for the detail itenm. 
if (self.detailItem) { 
self .detailDescriptionLabel.text = [self.detailItem descri[ 
} 
} 
- (void)viewDidLoad 


[super viewDidLoad]; 
[self configureView]; 


j 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


j 


- (id)initWithNibName:(NSString *)nibNameOrNil bundle: 
(NSBundle *)nibBundleOrNil 


{ 
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrN: 
if (self) { 
self.title = NSLocalizedString(Q"Detail", @"Detail"); 
j 
return self; 
j 


#pragma mark - Split view 


- (void)splitViewController:(UISplitViewController *)splitControll: 
willHideViewController:(UIViewController *)viewController withBa! 
(UIBarButtonlItem *)barButtonItem forPopoverController: 
(UIPopoverController *)popoverController 


{ 
barButtonItem.title = NSLocalizedString(@"Master", @"Master"); 
[self.navigationItem setLeftBarButtonItem:barButtonItem animate 
self.masterPopoverController = popoverController; 

} 


- (void)splitViewController:(UISplitViewController *)splitControll: 
willShowViewController:(UIViewController *)viewController 
invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem 


// Called when the view is shown again in the split view, 
//invalidating the button and popover controller. 
[self.navigationlItem setLeftBarButtonItem:nil animated:YES]; 
self.masterPopoverController - nil; 


j 

Qend 
s ——————— ác 
10. 现 在 当 我 们 运行 应 用 程序 时 ， 在 横向 模式 下 我 们 会 得 到 下 面 的 输出 





11. 当 我 们 切换 到 纵向 模式 ， 我 们 会 获得 下 面 的 输出 : 


IOS 文 本 视图 的 使 用 


文本 视图 用 于 显示 多 行 滚动 的 文本 。 


重要 属性 


dataDetectorTypes 
delegate 

editable 
inputAccessoryView 
inputView 

text 

textAlignment 
textColor 


重要 的 委托 方法 


-(void)textViewDidBeginEditing:(UITextView *)textView 


-(void)textViewDidEndEditing: (UITextView *)textView 


-(void)textViewDidChange:(UITextView *)textView 


-(BOOL)textViewShouldEndEditing:(UITextView *)textView 


添加 自 定 义 方 法 addTextView 


-(void)addTextView{ 
myTextView = [[UITextView alloc]initWithFrame: 
CGRectMake(10, 50, 300, 200)]; 
[myTextView setText:@"Lorem ipsum dolor sit er elit lamet, con: 
cillium adipisicing pecu, sed do eiusmod tempor incididunt ut - 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe! 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis : 
dolor in reprehenderit in voluptate velit esse cillum dolore ei 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
culpa qui officia deserunt mollit anim id est laborum. Nam lib« 
conscient to factor tum poen legum odioque civiuda. 
Lorem ipsum dolor sit er elit lamet, consectetaur cillium adip: 
pecu, sed do eiusmod tempor incididunt ut labore et dolore magr 
Ut enim ad minim veniam, quis nostrud exercitation ullamco ab 
aliquip ex ea commodo consequat. Duis aute irure dolor in repre 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur 
Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. Nam liber te « 
to factor tum poen legum odioque civiuda."]; 
myTextView.delegate - self; 
[self.view addSubview:myTextView]; 


El — B 





在 ViewController.m 中 执行 textView 委托 


#pragma mark - Text View delegates 
-(BOOL)textView:(UITextView *)textView shouldChangeTextInRange: 
(NSRange)range replacementText:(NSString *)text( 
if ([text isEqualToString:@"\n"]) { 
[textView resignFirstResponder]; 
return YES; 


j 
-(void)textViewDidBeginEditing:(UITextView *)textView{ 
NSLog(Q"Did begin editing"); 


j 
-(void)textViewDidChange:(UITextView *)textView{ 
NSLog(Q"Did Change"); 


-(void)textViewDidEndEditing: (UITextView *)textView{ 
NSLog(@"Did End editing"); 


j 

- (BOOL) textViewShouldEndEditing: (UITextView *)textView{ 
[textView resignFirstResponder ]; 
return YES; 


修改 ViewController.m 中 的 viewDidLoad 方 法 ， 如 下 所 示 


(void)viewDidLoad 


( 


[super viewDidLoad]; 
[self addTextView]; 


结果 输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 


IOS 视 图 切换 的 使 用 
视图 切换 通过 一 系列 动画 效果 实现 ,包括 折 和 县 切换 、 爆 炸 切 换 、 卡 片 式 切换 等 等 。 


修改 ViewController.xib， 如 下 所 示 


在 xib 中 创建 按钮 的 操作 


修改 ViewController.h 


#import «UIKit/UIKit.h» 


@interface ViewController : UIViewController 


{ 

UIView *view1; 

UIView *view2; 
j 
-(IBAction)flipFromLeft:(id)sender; 
-(IBAction)flipFromRight:(id)sender; 
-(IBAction)flipFromTop:(id)sender; 
-(IBAction)flipFromBottom:(id)sender; 
-(IBAction)curlUp:(id)sender; 
-(IBAction)curlDown:(id)sender; 
-(IBAction)dissolve:(id)sender; 
-(IBAction)noTransition:(id)sender; 


Qend 


f£ ViewController 类 中 声明 两 个 视图 的 实例 。ViewControllerh 文 件 代 码 如 下 : 


修改 ViewController.m 
我 们 将 添加 自 定义 方法 setUpView 来 初始 化 视图 。 
我 们 还 将 创建 了 另 一 种 方法 doTransitionWithType: 实现 view1 切 换 到 view2， 反 之 亦 


ZO 


后 我 们 将 执行 之 前 创建 的 操作 的 方法 即 调用 doTransitionWith Type: 方法 与 切换 类 
型 。ViewControllerm 代 码 如 下 : 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 
Qimplementation ViewController 
- (void)viewDidLoad 

[super viewDidLoad]; 


[self setUpView]; 
// Do any additional setup after loading the view, typically fi 


-(void)setUpView{ 
view1 = [[UIView alloc]initWithFrame:self.view. frame]; 
view1.backgroundColor = [UIColor lightTextColor]; 
view2 = [[UIView alloc]initWithFrame:self.view. frame]; 
view2.backgroundColor = [UIColor orangeColor]; 
[self .view addSubview: view1 ] ; 
[self.view sendSubviewToBack:view1]; 


j 


-(void)doTransitionwithType:(UIViewAnimationTransition)animationTr: 
if ([[self.view subviews] containsObject:view2 ]) { 
[UIView transitionFromView:view2 
toView:viewi 
duration:2 
options:animationTransitionType 
completion:^(BOOL finished) { 
[view2 removeFromSuperview ] ; 
3l; 
[self.view addSubview:view1]; 
[self.view sendSubviewToBack:view1]; 


} 
else{ 
[UIView transitionFromView:view1 
toView: view2 
duration:2 
options:animationTransitionType 
completion:^(BOOL finished) { 
[view1 removeFromSuperview ] ; 
jl; 
[self.view addSubview:view2]; 
[self.view sendSubviewToBack:view2]; 
} 


} 


-(IBAction)flipFromLeft:(id)sender 


[self doTransitionWithType:UIViewAnimationOptionTransitionFlipt 


j 
- (IBAction)flipFromRight : (id)sender{ 
[self doTransitionWithType:UIViewAnimationOptionTransitionFlipt 


j 
-(IBAction)flipFromTop:(id)sender( 
[self doTransitionWithType:UIViewAnimationOptionTransitionFlipt 


j 
- (IBAction)flipFromBottom: (id)sender { 


[self doTransitionWithType:UIViewAnimationOptionTransitionFlipt 


-(IBAction)curlUp:(id)sender( 
[self doTransitionWithType:UIViewAnimationOptionTransitionCurll 


-(IBAction)curlDown:(id)sender( 
[self doTransitionWithType:UIViewAnimationOptionTransitionCurlI 


-(IBAction)dissolve:(id)sender( 
[self doTransitionWithType:UIViewAnimationOptionTransitionCros: 


-(IBAction)noTransition:(id)sender( 

[self doTransitionWithType:UIViewAnimationOptionTransitionNone: 
} 
- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


} 
@end 





输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 


您 可 以 选择 不 同 的 按钮 ， 看 切换 是 如 何 工作 。 选 择 歇 缩 切换 将 效果 如 下 所 示 


选择 器 的 使 用 
选择 器 是 一 个 可 滚动 视图 ， 用 于 选取 列表 项 中 的 值 。 


重要 的 属性 


e delegate 
e dataSource 


重要 的 方法 


- (void)reloadAllComponents 


- (void)reloadComponent: (NSInteger)component 


- (NSInteger)selectedRowInComponent: (NSInteger)component 


- (void)selectRow:(NSInteger)row inComponent:(NSInteger)component 
animated: (BOOL)animated 


| 
修改 ViewController.h 


我 们 将 添加 一 个 文本 字段 、 选 择 器 视图 和 一 个 数组 。 


我 们 将 采用 UITextFieldDelegate、UIPickerViewDataSource、 
UlPickerViewDelegate 的 协议 。ViewController.h 文 件 代码 如 下 所 示 : 


#import <UIKit/UIKit.h> 


@interface ViewController : UIViewController 
<UITextFieldDelegate, UIPickerViewDataSource, UIPickerViewDelegate> 


{ 


UITextField *myTextField; 
UIPickerView *myPickerView; 
NSArray *pickerArray; 


} 
@end 


E ES 


添加 自 定 义 方 法 addPickerView 


-(void)addPickerView{ 
pickerArray = [[NSArray alloc]initWithObjects:@"Chess", 
@"Cricket",@"Football",@"Tennis",@"Volleyball", nil]; 
myTextField = [[UITextField alloc]initWithFrame: 
CGRectMake(10, 100, 300, 30)]; 
myTextField.borderStyle = UITextBorderStyleRoundedRect ; 
myTextField.textAlignment = UITextAlignmentCenter; 
myTextField.delegate = self; 
[self.view addSubview:myTextField]; 
[myTextField setPlaceholder:@"Pick a Sport"]; 
myPickerView = [[UIPickerView alloc]init]; 
myPickerView.dataSource = self; 
myPickerView.delegate = self; 
myPickerView.showsSelectionIndicator = YES; 
UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] 
initWithTitle:@"Done" style:UIBarButtonItemStyleDone 
target:self action:@selector(done: )]; 
UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame: 
CGRectMake(0, self.view.frame.size.height- 
myDatePicker.frame.size.height-50, 320, 50)]; 
[toolBar setBarStyle:UIBarStyleBlackOpaque ] ; 
NSArray *toolbarItems = [NSArray arrayWithObjects: 
doneButton, nil]; 
[toolBar setItems:toolbarItems]; 
myTextField.inputView - myPickerView; 
myTextField.inputAccessoryView - toolBar; 


执行 委托 ， 如 下 所 示 : 


#pragma mark - Text field delegates 


-(void)textFieldDidBeginEditing: (UITextField *)textField{ 
if ([textField.text isEqualToString:Q""]) { 
[self dateChanged:nil]; 
} 


} 


#pragma mark - Picker View Data source 

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerV: 
return 1; 

j 


-(NSInteger)pickerView:(UIPickerView *)pickerView 
numberOfRowsInComponent: (NSInteger )component { 
return [pickerArray count]; 
} 


#pragma mark- Picker View Delegate 


-(void)pickerView: (UIPickerView *)pickerView didSelectRow: 
(NSInteger)row inComponent: (NSInteger )component{ 
[myTextField setText:[pickerArray objectAtIndex:row]]; 
j 


- (NSString *)pickerView: (UIPickerView *)pickerView titleForRow: 
(NSInteger)row forComponent: (NSInteger )component { 
return [pickerArray objectAtIndex: row]; 





在 ViewControllerm 修 改 viewDidLoad， 如 下 所 示 : 


(void)viewDidLoad 


i 
[super viewDidLoad]; 
[self addPickerView]; 


输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 : 


文本 选择 器 视图 如 下 所 示 ， 我 们 可 以 选取 我 们 需要 的 值 : 


IOS 开 天 的 使 用 


开 天 用 于 打开 和 天 闭 状态 之 间 的 切换 。 
重要 的 属性 


e onlmage 
e offlmage 
e on 


重要 的 方法 


- (void)setOn:(BOOL)on animated: (BOOL)animated 


添加 目 定 义 方 法 addSwitch 和 开关 


-(IBAction)switched:(id)sender( 
NSLog(@"Switch current state %@", mySwitch.on ? Q"On" : Q"Off" 


-(void)addSwitch[( 
mySwitch - [[UISwitch alloc] init]; 
[self.view addSubview:mySwitch]; 
mySwitch.center - CGPointMake(150, 200); 
[mySwitch addTarget:self action:Qselector(switched:) 
forControlEvents:UIControlEventValueChanged]; 





ft ViewController.m 中 修改 viewDidLoad， 如 下 所 示 


(void)viewDidLoad 


1 
[super viewDidLoad]; 
[self addSwitch]; 
E 
输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 


向 右 滑动 开关 输出 如 下 所 示 


IOS 滑 块 的 使 用 


滑 块 用 于 从 某 个 范围 的 值 里 选择 的 一 个 值 。 
重要 的 属性 


e continuous 

e maximumValue 
e minimumValue 
e value 


重要 的 方法 


- (void)setValue:(float)value animated: (BOOL)animated 


添加 自 定义 方法 addSlider 和 sliderChanged 


-(IBAction)sliderChanged:(id)sender( 
NSLog(@"SliderValue %f",mySlider.value); 


-(void)addSlider { 
mySlider = [[UISlider alloc] initWithFrame:CGRectMake(50, 200, 
[self.view addSubview:mySlider ]; 
mySlider.minimumValue = 10.0; 
mySlider.maximumValue = 99.0; 
mySlider.continuous = NO; 
[mySlider addTarget:self action:@selector(sliderChanged: ) 
forControlEvents:UIControlEventValueChanged]; 


有 ES 





在 ViewController.m 中 修改 viewDidLoad， 如 下 所 示 


(void)viewDidLoad 


( 


[super viewDidLoad]; 
[self addSlider]; 


输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 


当 拖 动 滑 块 效果 如 下 : 


IOS 和 警告 对 话 框 的 使 用 


警告 对 话 框 用 来 给 用 户 提供 重要 信息 。 
仅 在 警告 对 话 框 视图 中 选 后 ， 才 能 着 手 进 一 步 使 用 应 用 程序 。 


重要 的 属性 


alertViewStyle 
cancelButtonIndex 
delegate 

message 
numberOfButtons 
title 


重要 的 方法 


- (NSInteger)addButtonWithTitle:(NSString ")title 


(NSString *)buttonTitleAtIndex: (NSInteger )buttonIndex 


(void)dismissWithClickedButtonIndex: 
(NSInteger )buttonIndex animated:(BOOL)animated 


(id)initwithTitle:(NSString *)title message: 
(NSString *)message delegate: (id)delegate 
cancelButtonTitle:(NSString *)cancelButtonTitle 
otherButtonTitles: (NSString* )otherButtonTitles, 


(void) show 


更 新 ViewController.h， 如 下 所 示 


让 类 符合 警告 对 话 框 视图 的 委托 协议 ， 如 下 所 示 ， 在 ViewController.h 中 添 力 
<UlAlertViewDelegate> 


#import «UIKit/UIKit.h» 


Qinterface ViewController : UIViewController<UIAlertViewDelegat 


} 
Qend 


«| d 





e>{ 





添加 自 定 义 方 法 addAlertView 


-(void)addAlertView{ 
UIAlertView *alertView = [[UIAlertView alloc]initWithTitle: 
@"Title" message:@"This is a test alert" delegate:self 
cancelButtonTitle:@"Cancel" otherButtonTitles:Q"Ok", nil]; 
[alertView show]; 


执行 警告 对 话 框 视图 的 委托 方法 


#pragma mark - Alert view delegate 


- (void)alertView: (UIAlertView *)alertView clickedButtonAtIndex: 


(NSInteger )buttonIndex{ 
switch (buttonIndex) { 
case 0: 
NSLog(@"Cancel button clicked"); 
break; 
case 1: 
NSLog(Q"OK button clicked"); 
break; 


default: 
break; 


ft ViewController.m 中 修改 viewDidLoad, 3I TF Hr 


(void)viewDidLoad 


{ 


[super viewDidLoad]; 
[self addAlertView]; 


输出 
现在 当 我 们 运行 该 应 用 程序 我 们 会 看 到 下 面 的 输出 : 


IOS 图 标的 使 用 


IOS 图 标 是 用 于 应 用 程序 相关 的 操作 。 
IOS 中 的 不 同 图 标 


e Applcon 
e App Store 的 应 用 程序 图 标 
。 搜索 结果 和 设置 的 小 图 标 
e 工具 栏 和 导航 栏 图 标 

e 选项 卡 栏 图 标 
Applcon 


Applcon 是 出 现在 设备 SpringBoard (默认 屏幕 上 的 所 有 的 应 用 程序 ) 的 应 用 程序 
的 图 标 。 


App Store 的 应 用 程序 图 标 
它 是 512 x 512 或 1024 x 1024( 推 荐 大 小 ) 的 高 分 辩 率 的 应 用 程序 图 标 。 


搜索 结果 和 设置 的 小 图 标 

在 搜索 列表 的 应 用 程序 中 使 用 这 个 小 图 标 。 

它 还 用 于 与 相关 的 应 用 程序 的 功能 是 启用 和 禁用 的 设置 屏幕 上 。 如 : 启用 定位 服 
务 。 

工具 栏 和 导航 栏 图 标 

工具 栏 和 导航 栏 中 使 用 特制 的 标准 图 标的 列表 。 它 包括 的 份额 ， 像 图 标 相 机 ， 撰 宇 
等 o 

选项 卡 栏 图 标 

选项 卡 栏 中 使 用 一 系列 特制 的 标准 图 标 列表 。 它 包括 的 图 标 有 书签 、 联系 人 、 下 
载 


o 


有 的 不 同 的 IOS 设备 的 每 个 图 标 大 小 的 都 不 一 样 。 你 可 以 查看 更 多 关于 葵 果 文件 中 
图 标的 准则 : ios 人 机 交互 界面 指南 。 


IOS 加 速度 传感器 (accelerometen) 


加 速度 传感器 是 根据 x、y 和 z 三 个 方向 来 检测 在 设备 位 置 的 改变 。 
通过 加 速度 传感器 可 以 知道 当前 设备 相对 于 地 面 的 位 置 。 
以 下 实例 代码 需要 在 真实 设备 上 运行 ， 在 模拟 器 上 是 无 法 工作 的 。 


实例 步 又 
1、 创 建 一 个 简单 的 视图 应 用 程序 


2、 在 ViewController.xib 中 添加 三 个 标签 ， 并 创建 一 个 ibOutlets 分 别 为 : xlable、 
ylabel 和 zlabel 


3、 如 下 所 示 ， 更 新 ViewController.h 


#import <UIKit/UIKit.h> 
Qinterface ViewController : UIViewController<UIAccelerometerDelegat 
IBOutlet UILabel *xlabel; 


IBOutlet UILabel *ylabel; 
IBOutlet UILabel *zlabel; 


} 
Qend 





4、 如 下 所 示 ， 更 新 ViewController m 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 
Qimplementation ViewController 
- (void)viewDidLoad 
[super viewDidLoad]; 
[[UIAccelerometer sharedAccelerometer]setDelegate:self]; 
//Do any additional setup after loading the view,typically fror 
(void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerat 
(UIAcceleration *)acceleration{ 
[xlabel setText:[NSString stringWwithFormat:Q"96f",acceleration.» 
[ylabel setText:[NSString stringwithFormat:@"%f",acceleration.\ 
[zlabel setText:[NSString stringwWithFormat :@"%f",acceleration.: 
} 


Qend 
uc 
输出 
当 我 们 在 iPhone 设备 中 运行 该 应 用 程序 ， 得 到 的 输出 结果 如 下 所 示 。 
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通用 的 应 用 程序 是 为 iPhone 和 iPad 在 一 个 单一 的 二 进 制 文 件 中 设计 的 应 用 程序 。 这 
有 助 于 代码 重用 ， 并 能 够 帮助 更 快 进行 更 新 。 

实例 步 又 

1、 创 建 一 个 简单 的 View based application (视图 应 用 程序 ) 


2、 在 文件 查看 器 的 右边 ， 将 文件 ViewController.xib 的 文件 名 称 更 改 为 
ViewController_iPhone.xib， 如 下 所 示 





eoo 也 UniversalAopication wcodeproy VeeControler sid 





3、 和 选择"File -> New -> File... "， 然 后 选择 User Interface， 再 选择 View， 单 击 下 一 
步 


NI 
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Choose a template for your new file: 
Bios 
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Cocoa Touch QS 
Cand C++ LS LT LE 
User Interface EM Minden 
An Interface Builder document for creating an iOS view. 





4、 选 择 iPad 作 为 设备 ， 单 击 下 一 步 : 


| Choose options for your new file: 
一 A 





Device Family | iPad 2) 








( Cancel | ( Previous | (inex) 





5、 将 该 文件 另存 为 ViewController iPad.xib， 然 后 选择 创建 
6、 在 ViewController_ iPhone.xib 和 ViewController_iPad.xibd 的 屏幕 中 心 添加 标签 


7、 在 ViewController_ iPhone.xib 中 选择 identity inspector， 设 置 custom class 7j 
ViewController 
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8、 更 新 AppDelegate.m 中 的 application:DidFinishLaunching:withOptions 方 法 


- (BOOL)application: (UIApplication *)application 
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
self.window = [[UIWindow alloc] initWithFrame: [[UIScreen 
mainScreen] bounds] ]; 
// Override point for customization after application launch. 
if (UI USER INTERFACE IDIOM() == UIUserInterfaceIdiomPhone) { 
self.viewController - [[ViewController alloc] 
initWithNibName:Q"ViewController iPhone" bundle:nil]; 
} 
elsef 
self.viewController - [[ViewController alloc] initWithNibN: 
Q"ViewController iPad" bundle:nil]; 


self.window.rootViewController - self.viewController; 
[self.window makeKeyAndVisible]; 
return YES; 





9、 在 项 目 摘要 中 更 新 设备 中 为 universal， 如 下 所 示 : 
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运行 该 应 用 程序 ， 我 们 会 看 到 下 面 的 输出 
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在 iPad 模 拟 器 中 运行 应 用 程序 ,我 们 会 得 到 下 面 的 输出 : 


iOS Simulator - iPad / iOS 6.0 (10A403) 


IOS 相 机 管理 


相机 简介 


相机 是 移动 设备 的 共同 特点 之 一 ， 我 们 能 够 使 用 相机 拍摄 图 片 ， 并 在 应 用 程序 里 调 
用 它 ， 而 且 相 机 的 使 用 很 简单 。 

实例 步骤 

1、 创 建 一 个 简单 的 View based application 

2、 在 ViewControllerxib 中 添加 一 个 button (H) ， 并 为 该 按钮 创建 IBAction 
3、 添 加 一 个 image view (ARMA) ， 并 创建 一 个 名 为 imageView 的 IBOutlet 
4、ViewControllerh 文 件 代 码 如 下 所 示 : 


#import «UIKit/UIKit.h» 
Qinterface ViewController : UIViewController<UIImagePickerControlle 
i UIImagePickerController *imagePicker; 
IBOutlet UIImageView *imageView; 
- (IBAction)showCamera:(id)sender; 
Qend 


1 IRE 


5、 修 改 ViewControllerm, 如 下 所 示 : 





#import "ViewController.h" 
Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


- (IBAction)showCamera:(id)sender { 
imagePicker.allowsEditing = YES; 
if ([UIImagePickerController isSourceTypeAvailable: 
UIImagePickerControllerSourceTypeCamera]) 


{ 
imagePicker.sourceType = UIImagePickerControllerSourceType( 
} 
elsef 
imagePicker.sourceType = 
UIImagePickerControllerSourceTypePhotoLibrary; 
} 


[self presentModalViewController:imagePicker animated: YES]; 


-(void)imagePickerController:(UIImagePickerController *)picker 
didFinishPickingMediaWithInfo:(NSDictionary *)info( 
UIImage *image = [info objectForKey:UIImagePickerControllerEdi! 
if (image -- nil) ( 
image = [info objectForKey:UIImagePickerControllerOriginal. 
j 


imageView.image - image; 
} 


-(void)imagePickerControllerDidCancel:(UIImagePickerController *)p: 
[self dismissModalViewControllerAnimated:YES]; 
} 


Qend 








输出 
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只 要 拍照 之 后 ， 就 可 以 通过 移动 和 缩放 对 图 片 进 行 编辑 ， 如 下 所 示 。 


Move and Scale 
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IOS 定 位 操作 
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在 IOS 中 通过 CoreLocation 定 位 ， 可 以 获取 到 用 户 当 前 位 置 ， 同 时 能 得 到 装置 移动 


信息 。 


实例 步骤 
1、 创 建 一 个 简单 的 View based application (视图 应 用 程序 ) 。 
2、 择 项 目 文件 ， 然 后 选择 目标 ， 然 后 添加 CoreLocation.framework, 如 下 所 示 








< 
Choose frameworks and libraries to add p 
f Build Rules 
M. S1 core 


Y. 0560 

A K* CoreAudio framework 
K* CoreBluetooth.framework 
K* CoreData framework 
K* Coref os0daton framework 
K* CoreCraphics framework 
& Corelmage.framework Retina (4-inch) 
K* CoreMedia. framework 
EÈ CoreMIDi framework Required $ 
K* CoreMotion. framework Required $ 
K* CoreTeleghoey.framework Required $ 
K* CoreText.framework Required » 


K* CoreVideo. framework 
libcorecrypto.dytib 
libicucone.A dylid 
€—P: 


Add Other Cancel | Add | 





Key- Value Store 


Ubiquity Containers 


Keychain Groups 


Passes c 
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Add Target Validate Settings 


3、 在 ViewController.xib 中 添加 两 个 标签 ， 创 建 ibOutlet 名 为 latitudeLabel 和 
longtitudeLabelB^ +r 4 


4、 现 在 通过 选择 " File-> New -> File... -> "选择 Objective C class 并 单 击 下 一 步 
5、 把 "sub class of" 作 为 NSObject， 将 类 命名 为 LocationHandler 
6、 选 择 创建 


7、 更 新 LocationHandler.h， 如 下 所 示 


#import <Foundation/Foundation.h> 
#import <CoreLocation/CoreLocation.h> 


@protocol LocationHandlerDelegate <NSObject> 


@required 

-(void) didUpdateToLocation: (CLLocation* )newLocation 
fromLocation:(CLLocation*)oldLocation; 

Qend 


Qinterface LocationHandler : NSObject<CLLocationManagerDelegate> 


t 
} 


@property(nonatomic,strong) id<LocationHandlerDelegate> delegate; 


CLLocationManager *locationManager; 


*(id)getSharedInstance; 

-(void)startUpdating; 

-(void) stopUpdating; 

Qend 
Bom LE wi 


8、 更 新 LocationHandlerm ,如 下 所 示 


#import "LocationHandler.h" 
static LocationHandler *DefaultManager - nil; 


Qinterface LocationHandler() 
-(void)initiate; 

Qend 

Qimplementation LocationHandler 


*(id)getSharedInstance( 
if (!DefaultManager) ( 
DefaultManager - [[self allocWithzone:NULL]init]; 
[DefaultManager initiate]; 


return DefaultManager; 


-(void)initiate( 
locationManager - [[CLLocationManager alloc]init]; 
locationManager.delegate - self; 


j 


-(void)startUpdating{ 
[locationManager startUpdatingLocation]; 
} 


-(void) stopUpdating{ 
[locationManager stopUpdatingLocation]; 


-(void)locationManager:(CLLocationManager *)manager didUpdateToLoc: 
(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation( 
if ([self.delegate respondsToSelector:Qselector 
(didUpdateToLocation:fromLocation:)]) 
{ 
[self.delegate didUpdateToLocation:oldLocation 
fromLocation:newLocation]; 





9、 更 新 ViewController.h, 如 下 所 示 


#import «UIKit/UIKit.h» 
#import "LocationHandler.h" 
Qinterface ViewController : UIViewController«LocationHandlerDelega! 


IBOutlet UILabel *latitudeLabel; 
IBOutlet UILabel *longitudeLabel; 


} 
@end 


«| 








10、 更 新 ViewController.m, 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 
Qimplementation ViewController 
- (void)viewDidLoad 

[super viewDidLoad]; 


[[LocationHandler getSharedInstance]setDelegate:self]; 
[[LocationHandler getSharedInstance]startUpdating]; 


} 
- (void)didReceiveMemoryWarning 

[super didReceiveMemoryWarning]; 

// Dispose of any resources that can be recreated. 
} 


-(void)didUpdateToLocation:(CLLocation *)newLocation 
fromLocation:(CLLocation *)oldLocation{ 
[latitudeLabel setText:[NSString stringwithFormat: 
@"Latitude: %f",newLocation.coordinate. latitude] ]; 
[longitudeLabel setText:[NSString stringWithFormat: 
@"Longitude: %f",newLocation.coordinate.longitude] ]; 


} 
Qend 


输出 
当 我 们 运行 该 应 用 程序 ， 会 得 到 如 下 的 输出 : 


Latitude: 37.324626 


Longitude: -122.023273 





lOS SQLite 数 据 库 


在 IOS 中 使 用 Sqlite 来 处 理 数据 。 如 果 你 已 经 了 解 了 SQL， 那 你 可 以 很 容易 的 掌握 
SQLite 数 据 库 的 操作 。 

实例 步 又 

1、 创 建 一 个 简单 的 View based application 

、 选 择 项 目 文件 ， 然 后 选择 目标 ， 添 加 libsqlite3.dylib 库 到 选择 框架 


2 
3、 通 过 选择 " File-> New -> File... -> "选择 Objective C class 创建 新 文件 ， 单 击 下 
一 步 


4. "sub class of" 为 NSObject"， 类 命名 为 DBManager 
选择 创建 
6、 更 新 DBManager.h, 如 下 所 示 


#import <Foundation/Foundation.h> 
#import <sqlite3.h> 


@interface DBManager : NSObject 


NSString *databasePath; 
} 


+(DBManager* )getSharedInstance; 

-(BOOL)createDB; 

-(BOOL) saveData:(NSString*)registerNumber name:(NSString*)name 
department:(NSString*)department year:(NSString*)year; 

-(NSArray*) findByRegisterNumber:(NSString*)registerNumber; 


Qend 


7、 更 新 DBManager.m, 如 下 所 示 


#import "DBManager.h" 

static DBManager *sharedInstance = nil; 
static sqlite3 *database - nil; 

static sqlite3 stmt *statement - nil; 


Qimplementation DBManager 


-(DBManager*)getSharedInstance( 
if (!sharedInstance) ( 
sharedInstance = [[super allocWithZone:NULL]init]; 
[sharedInstance createDB]; 


} 
return sharedInstance; 
} 
- (BOOL)createDB{ 
NSString *docsDir; 
NSArray *dirPaths; 
// Get the documents directory 
dirPaths = NSSearchPathForDirectoriesInDomains 
(NSDocumentDirectory, NSUserDomainMask, YES); 
docsDir - dirPaths[0]; 
// Build the path to the database file 
databasePath - [[NSString alloc] initWithString: 
[docsDir stringByAppendingPathComponent: @"student.db"]]; 
BOOL isSuccess - YES; 
NSFileManager *filemgr = [NSFileManager defaultManager ]; 
if ([filemgr fileExistsAtPath: databasePath ] -- NO) 
const char *dbpath - [databasePath UTF8String]; 
if (sqlite3 open(dbpath, &database) -- SQLITE OK) 
{ 
char *errMsg; 
const char *sql stmt = 
"create table if not exists studentsDetail (regno inte, 
primary key, name text, department text, year text)"; 
if (sqlite3 exec(database, sql stmt, NULL, NULL, &errM: 
!= SQLITE OK) 
{ . 
isSuccess = NO; 
NSLog(@"Failed to create table"); 
} 
sqlite3 close(database); 
return isSuccess; 
} 
else { 
isSuccess = NO; 
NSLog(Q"Failed to open/create database"); 
} 
} . 
return isSuccess; 
} 
- (BOOL) saveData: (NSString*)registerNumber name:(NSString*)name 
department:(NSString*)department year:(NSString*)year; 
{ 


const char *dbpath = [databasePath UTF8String]; 
if (sqlite3_open(dbpath, &database) == SQLITE_OK) 
{ 


j 


NSString *insertSQL = [NSString stringwWithFormat:@"insert : 
studentsDetail (regno,name, department, year) values 
(N'"960N" , \"%@\", \"%@\", \"%@\")", [registerNumber integerVa- 
name, department, year]; 

const char *insert stmt = [insertSQL UTF8String]; 

sqlite3 prepare v2(database, insert stmt,-1, &statement, Nl 
if (sqlite3_step(statement) == SQLITE DONE) 


{ 

return YES; 
j 
else 1 


return NO; 


sqlite3 reset(statement); 


return NO; 


j 


- (NSArray*) findByRegisterNumber: (NSString* )registerNumber 


const char *dbpath = [databasePath UTF8String]; 
if (sqlite3_open(dbpath, &database) == SQLITE_OK) 


{ 


} 


NSString *querySQL = [NSString stringWithFormat: 
@"select name, department, year from studentsDetail where 
regno=\"%@\"", registerNumber]; 
const char *query stmt = [querySQL UTF8String]; 
NSMutableArray *resultArray - [[NSMutableArray alloc]init], 
if (sqlite3 prepare v2(database, 

query stmt, -1, &statement, NULL) == SQLITE OK) 


{ 
if (sqlite3_step(statement) == SQLITE_ROW) 


NSString *name = [[NSString alloc] initWithUTF8Str: 
(const char *) sqlite3_column_text(statement, 0)], 

[resultArray addObject:name]; 
NSString *department = [[NSString alloc] initWithU* 
(const char *) sqlite3_column_text(statement, 1)]; 
[resultArray addObject:department]; 
NSString *year = [[NSString alloc]initWithUTF8Strir 
(const char *) sqlite3_column_text(statement, 2)]; 
[resultArray addObject:year]; 
return resultArray; 

} 

else{ 
NSLog(@"Not found"); 
return nil; 


} 


sqlite3 reset(statement); 


j 


return nil; 


al 








8、 如 图 所 示 ， 更 新 ViewController.xib 文 件 


ff placeholders 


File's Owner 
® First Responder 


Sone ee) 


v View 
Label - Student details Student details 
v Scroll View 

Text Field 
Text Field 
Label - Name 
Label - Reg no 
Text Field Reg no 
Text Field 
Label - Department 
Label - Year 
Button - Save 


Text Field - Enter Department 
_ Button ~ Find 


Find 


Name 


Year 


Save 


9、 为 上 述 文本 字段 创建 IBOutlets 
10、 为 上 述 按钮 创建 IBAction 
11、 如 下 所 示 ， 更 新 ViewController.h 


#import «UIKit/UIKit.h» 
#import "DBManager.h" 


Qinterface ViewController : UIViewController<UITextFieldDelegate> 


{ 
IBOutlet UITextField *regNoTextField; 


IBOutlet UITextField *nameTextField; 
IBOutlet UITextField *departmentTextField; 
IBOutlet UITextField *yearTextField; 
IBOutlet UITextField *findByRegisterNumberTextField; 
IBOutlet UIScrollView *myScrollView; 
} 


-(IBAction)saveData:(id)sender; 
-(IBAction)findData:(id)sender; 


Qend 
n ———————————É Hm! in 
12、 更 新 ViewController.m, 如 下 所 示 


#import "ViewController.h" 
@interface ViewController () 
@end 

@implementation ViewController 


- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *) 
nibBundleOrNil 
{ 


self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrN: 
if (self) { 

// Custom initialization 
} 


return self; 


} 
- (void)viewDidLoad 


[super viewDidLoad]; 
// Do any additional setup after loading the view from its nib 


} 
- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


-(IBAction)saveData:(id)sender( 

BOOL success - NO; 

NSString *alertString - Q"Data Insertion failed"; 

if (regNoTextField.text.length>0 &&nameTextField.text.length>0 

departmentTextField.text.length>0 &&yearTextField.text.length>( 

{ 
success = [[DBManager getSharedInstance]saveData: 
regNoTextField.text name:nameTextField.text department: 
departmentTextField.text year:yearTextField.text]; 


j 

else{ 
alertString = @"Enter all fields"; 

} 

if (success == NO) { 
UIAlertView *alert = [[UIAlertView alloc]initWithTitle: 
alertString message:nil 
delegate:nil cancelButtonTitle:Q"OK" otherButtonTitles:nil: 
[alert show]; 

j 


j 


-(IBAction)findData:(id)sender( 
NSArray *data - [[DBManager getSharedInstance]findByRegisterNur 
findByRegisterNumberTextField.text]; 
if (data == nil) { 
UIAlertView *alert = [[UIAlertView alloc]initWithTitle: 
@"Data not found" message:nil delegate:nil cancelButtonTit- 
Q"OK" otherButtonTitles:nil]; 
[alert show]; 
regNoTextField.text = @""; 
nameTextField.text =@""; 
departmentTextField.text = @""; 
yearTextField.text =@""; 


j 

else{ 
regNoTextField.text = findByRegisterNumberTextField.text; 
nameTextField.text =[data objectAtIndex:0]; 
departmentTextField.text - [data objectAtIndex:1]; 
yearTextField.text -[data objectAtIndex:2]; 

j 


j 


#pragma mark - Text field delegate 

-(void)textFieldDidBeginEditing: (UITextField *)textField{ 
[myScrollView setFrame:CGRectMake(10, 50, 300, 200)]; 
[myScrollView setContentSize:CGSizeMake(300, 350)]; 


-(void)textFieldDidEndEditing:(UITextField *)textField{ 
[myScrollView setFrame:CGRectMake(10, 50, 300, 350)]; 


j 
-(BOOL) textFieldShouldReturn:(UITextField *)textField{ 


[textField resignFirstResponder]; 
return YES; 


} 
Qend 


«| = 











输出 


现在 当 我 们 运行 应 用 程序 时 ， 我 们 就 会 获得 下 面 的 输出 ， 我 们 可 以 在 其 中 添加 及 坦 
找 学 生 的 详细 信息 
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Student details 


Reg no 


Name 


Department 


Year 
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我 们 可 以 使 用 IOS 设 各 中 的 电子 邮件 应 用 程序 发 送 电子 邮件 。 


实例 步 又 

1、 创 建 一 个 简单 的 View based application 

2、 选 择 项 目 文 件 ， 然 后 选择 目标 ， 然 后 添加 MessageUl.framework 

3、 在 ViewControllerxib 中 添加 一 个 按钮 ， 创 建 用 于 发 送 电子 邮件 的 操作 (action) 
4、 更 新 ViewController.h, 如 下 所 示 


#import <UIKit/UIKit.h> 
#import <MessageUI/MessageUI.h> 


Qinterface ViewController : UIViewController«MFMailComposeViewConti 


MFMailComposeViewController *mailComposer; 


j 

- (IBAction)sendMail:(id)sender; 

Qend 
LEN 


5、 如 下 所 示 ， 更 新 ViewController.m 





#import "ViewController.h" 
Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


j 


-(void)sendMail:(id)sender( 
mailComposer - [[MFMailComposeViewController alloc]init]; 
mailComposer.mailComposeDelegate - self; 
[mailComposer setSubject:@"Test mail"]; 


[mailComposer setMessageBody:@"Testing message 
for the test mail" isHTML:NO]; 


[self presentModalViewController:mailComposer animated:YES]; 


j 


#pragma mark - mail compose delegate 
-(void)mailComposeController:(MFMailComposeViewController *)contro- 


didFinishwithResult:(MFMailComposeResult)result error:(NSError *)t 
if (result) { 


NSLog(@"Result : %d",result); 
} 


if (error) { 
NSLog(@"Error : %@",error); 
} 


[self dismissModalViewControllerAnimated: YES]; 





输出 
当 运行 该 应 用 程序 ， 会 看 如 下 的 输出 结果 


Send mail 





^. 


x A "send email" 发 送 按钮 后 ， 可 以 看 到 如 下 结果 : 
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Test mail 


Testing message for the test mail 


Sent from my iPhone Simulator 





IOS 音 频 和 视频 (Audio & Video) 
简介 


音频 和 视频 在 最 新 的 设备 中 颇 为 常见 。 


将 iosAVFoundation.framework 和 MediaPlayer.framework 添 加 到 Xcode 项 目 中 ， 可 
以 让 IOS 支 持 音 频 和 视频 (Audio & Video)。 


实例 步骤 


1、 创 建 一 个 简单 的 View based application 


2、 选 择 项 目 文件 、 选 择 目标 ， 然 后 添加 AVFoundation.framework 和 
MediaPlayer.framework 


3、 在 ViewController.xib 中 添加 两 个 按钮 ， 创 建 一 个 用 于 分 别 播放 音频 和 视频 的 动 
作 (action) 


4、 更 新 ViewController.h, 如 下 所 示 


#import <UIKit/UIKit.h> 
#import <AVFoundation/AVFoundation.h> 
#import <MediaPlayer/MediaPlayer .h> 


@interface ViewController : UIViewController 
AVAudioPlayer *audioPlayer; 


MPMoviePlayerViewController *moviePlayer; 


- (IBAction)playAudio: (id)sender; 
- (IBAction)playVideo:(id)sender; 
@end 


5、 更 新 ViewController.m， 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 

Qimplementation ViewController 


- (void)viewDidLoad 


{ 
} 


- (void)didReceiveMemoryWarning 


( 


[super viewDidLoad]; 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 

} 

- (IBAction)playAudio:(id)sender( 
NSString *path - [[NSBundle mainBundle] 
pathForResource:@"audioTest" ofType:Q"mp3"]; 
audioPlayer - [[AVAudioPlayer alloc]initWithContentsOfURL: 
[NSURL fileURLWithPath:path] error:NULL]; 
[audioPlayer play]; 

} 

-(IBAction)playVideo:(id)sender( 
NSString *path - [[NSBundle mainBundle]pathForResource: 
Q"videoTest" ofType:@"mov"]; 
moviePlayer - [[MPMoviePlayerViewController 
alloc]initwithContentURL:[NSURL fileURLWithPath:path]]; 
[self presentModalViewController:moviePlayer animated:NO]; 


Qend 


需要 添加 音频 和 视频 文件 ， 以 确保 获得 预期 的 输出 


运行 该 程序 ， 得 到 的 输出 结果 如 下 


Play Audio 


Play video 





k , 
当 我 们 点 击 play video( 播 放 视 频 ) 显 示 如 下 : 
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文件 处 理 不 能 直观 的 通过 应 用 程序 来 解释 ， 我 们 可 以 从 以 下 实例 来 了 解 IOS 的 文件 
处 理 。 


IOS 中 对 文件 的 操作 . 因为 应 用 是 在 沙 箱 (sandbox) 中 的 ， 在 文件 读 写 权限 上 受到 
限制 ， 只 能 在 几 个 目录 下 读 写 文件 。 


文件 处 理 中 使 用 的 方法 


下 面 列 出 了 用 于 访问 和 操作 文件 的 方法 的 列表 。 


以 下 实例 你 必须 替换 FilePath1、FilePath 和 FilePath 字 符 串 为 完整 的 文件 路 径 ， 以 
获得 所 需 的 操作 。 


检查 文件 是 否 存 在 


NSFileManager *fileManager = [NSFileManager defaultManager]; 
//Get documents directory 
NSArray *directoryPaths - NSSearchPathForDirectoriesInDomains 
(NSDocumentDirectory, NSUserDomainMask, YES); 
NSString *documentsDirectoryPath = [directoryPaths objectAtInde» 
if ([fileManager fileExistsAtPath:@""]==YES) { 

NSLog(@"File exists"); 





E 
比较 两 个 文件 的 内 容 


if ([fileManager contentsEqualAtPath:@"FilePathi" andPath:Q" Fi: 
NSLog(@"Same content"); 





检查 是 否 可 写 、 可 读 、 可 执行 文件 


if ([fileManager isWritableFileAtPath:@"FilePath"]) { 
NSLog(@"isWritable"); 


if ([fileManager isReadableFileAtPath:@"FilePath"]) { 
NSLog(@"isReadable" ); 


if ( [fileManager isExecutableFileAtPath:@"FilePath"]) { 
NSLog(@"is Executable"); 
} 


移动 文件 


if([fileManager moveItemAtPath:@"FilePathi" 

toPath:Q"FilePath2" error:NULL]){ 
NSLog(Q"Moved successfully"); 

} 


复制 文件 


if ([fileManager copyItemAtPath:Q"FilePath1i" 

toPath:Q"FilePath2"  error:NULL]) { 
NSLog(@"Copied successfully"); 

} 


删除 文件 


if ([fileManager removeItemAtPath:@"FilePath" error:NULL]) { 
NSLog(@"Removed successfully"); 
} 


读 取 文 件 


NSData *data = [fileManager contentsAtPath:Q"Path"]; 


写 入 文件 


[fileManager createFileAtPath:Q"" contents:data attributes:nil]; 


ER 和 时 


IOS 地 图 开发 


IOS 地 图 帮助 我 们 定位 位 置 ，IOS 地 图 使 用 MapKit 框架 。 


实例 步 又 
1. 创 建 一 个 简单 的 View based application 
选择 项 目 文件 ， 然 后 选择 目标 ， 然 后 添加 MapKit.framework. 
3. 添 加 Corelocation.framework 
4. 向 ViewController.xib 添加 地 图 查看 和 创建 ibOutlet 并 且 命名 为 mapView。 
5. 通 过 "File-> New -> File... -> "选择 Objective C class 创 建 一 个 新 的 文件 ， 单 击 下 


EE 
6."sub class of"% NSObject， 类 作 命 名 为 MapAnnotation 
7. 选 择 创建 
8. 更 新 MapAnnotation.h ， 如 下 所 示 


#import <Foundation/Foundation.h> 
#import <MapKit/MapKit.h> 


Qinterface MapAnnotation : NSObject«MKAnnotation» 
Qproperty (nonatomic, strong) NSString *title; 
Qproperty (nonatomic, readwrite) CLLocationCoordinate2D coordinate, 


- (id)initWithTitle:(NSString *)title andCoordinate: 
(CLLocationCoordinate2D)coordinate2d; 


Qend 
-| — 
9. 更 新 MapAnnotation.m ， 如 下 所 示 





#import "MapAnnotation.h" 


Qimplementation MapAnnotation 
-(id)initWithTitle:(NSString *)title andCoordinate: 
(CLLocationCoordinate2D )coordinate2d{ 
self.title = title; 
self.coordinate =coordinate2d; 
return self; 


} 
@end 


10. 更 新 ViewControllerh , 80 KARAS 


#import «UIKit/UIKit.h» 

#import <MapKit/MapKit .h> 

#import <CoreLocation/CoreLocation.h> 

Qinterface ViewController : UIViewController<MKMapViewDelegate> 


{ 


} 
@end 


MKMapView *mapView; 


11. 更 新 ViewControllerm , 0 KARAS 


#import "ViewController.h" 
#import "MapAnnotation.h" 


Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 

mapView - [[MKMapView alloc]initWithFrame: 

CGRectMake(10, 100, 300, 300)]; 

mapView.delegate - self; 

mapView.centerCoordinate - CLLocationCoordinate2DMake(37.32, 
mapView.mapType - MKMapTypeHybrid; 

CLLocationCoordinate2D location; 

location.latitude - (double) 37.332768; 

location.longitude - (double) -122.030039; 

// Add the annotation to our map view 

MapAnnotation *newAnnotation - [[MapAnnotation alloc] 
initWithTitle:Q"Apple Head quaters" andCoordinate:location]; 
[mapView addAnnotation:newAnnotation]; 
CLLocationCoordinate2D location2; 

location2.latitude - (double) 37.35239; 

location2.longitude - (double) -122.025919; 

MapAnnotation *newAnnotation2 - [[MapAnnotation alloc] 
initwithTitle:Q"Test annotation" andCoordinate:location2]; 
[mapView addAnnotation:newAnnotation2]; 

[self.view addSubview:mapView]; 


j 


// When a map annotation point is added, zoom to it (1500 range) 


sd 


- (void)mapView:(MKMapView *)mv didAddAnnotationViews:(NSArray *)v: 


MKAnnotationView *annotationView - [views objectAtIndex:0]; 
id «MKAnnotation» mp - [annotationView annotation]; 


MKCoordinateRegion region - MKCoordinateRegionMakeWithDistance 


([mp coordinate], 1500, 1500); 
[mv setRegion:region animated:YES]; 
[mv selectAnnotation:mp animated:YES]; 


} 
- (void)didReceiveMemoryWarning 

[super didReceiveMemoryWarning]; 

// Dispose of any resources that can be recreated. 
} 


@end 











输出 
运行 应 用 程序 时 ， 输 出 结果 如 下 


nm ] 


pem 





当 我 们 向 上 滚动 地 图 时 ， 输 出 结果 如 下 


s i; =a 






































IOS 应 用 内 购买 


间 J I 
应 用 程序 内 购买 是 应 用 程序 用 于 购买 额外 内 容 或 升级 功能 。 


实例 步骤 


1.f£ iTunes 连接 中 请 确保 拥有 一 个 唯一 的 App ID (unique App ID) ， 当 创建 捆绑 
的 ID (bundle ID) 应 用 程序 更 新 时 ， 代码 会 以 相 点 的 配置 文件 签名 在 Xcode 上 


2. 创 建新 的 应 用 程序 和 更 新 应 用 程序 信息 。 你 可 以 知道 更 多 有 关 的 ， 在 葵 果 的 添加 
新 的 应 用 程序 文档 中 


3. 在 应 用 程序 页 的 管理 应 用 程序 ( Manage In-App Purchase) 中 ， 为 app 内 付费 添加 
新 产品 


4. 确 保 设 置 的 应 用 程序 为 的 银行 详细 。 需 要 将 其 设置 为 在 应 用 程序 内 购买 (In- -App 
purchase) 。 此 外 在 iTunes 中 使 用 管理 用 户 (Manage Users) 选项 ， 创 建 一 个 测 
试用 户 帐户 连接 您 的 应 用 程序 的 页 。 


5. 下 一 步 是 与 处 理 代码 和 为 我 们 在 应 用 程序 内 购买 创建 有 关 的 Ul 
6. 创 建 一 个 单一 的 视图 应 用 程序 ， 并 在 iTunes 中 指定 的 标识 符 连接 输入 捆绑 标识 符 
7. 更 新 ViewController.xib ， 如 下 所 示 


TutorialsPoint 移动 端 教程 





8. 为 三 个 标签 创建 |BOutlets， 且 将 按钮 分 别 命名 为 productTitleLabel、 
productDescriptionLabel、 productPriceLabel 和 purchaseButton 


9. 选 择 项 目 文件 ， 然 后 选择 目标 ， 然 后 添加 StoreKit.framework 
10. 更 新 ViewControllerh ， 如 下 所 示 


IOS 应 用 内 购买 446 


#import «UIKit/UIKit.h» 
#import «StoreKit/StoreKit.h-» 


@interface ViewController : UIViewController< 
SKProductsRequestDelegate, SKPaymentTransactionObserver> 
f 

SKProductsRequest *productsRequest; 

NSArray *validProducts; 

UIActivityIndicatorView *activityIndicatorView; 

IBOutlet UILabel *productTitleLabel; 

IBOutlet UILabel *productDescriptionLabel; 

IBOutlet UILabel *productPriceLabel; 

IBOutlet UIButton *purchaseButton; 


(void)fetchAvailableProducts; 
(BOOL)canMakePurchases; 
(void)purchaseMyProduct: (SKProduct*)product; 
(IBAction)purchase:(id)sender; 


Qend 


11.838 ViewController.m ， 如 下 所 示 


#import "ViewController.h" 
#define kTutorialPointProductID 
Q"com.tutorialPoints.testApp.testProduct" 


Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 
// Adding activity indicator 
activityIndicatorView - [[UIActivityIndicatorView alloc] 
initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhi! 
activityIndicatorView.center - self.view.center; 
[activityIndicatorView hideswhenStopped]; 
[self.view addSubview:activityIndicatorView]; 
[activityIndicatorView startAnimating]; 
//Hide purchase button initially 
purchaseButton.hidden - YES; 
[self fetchAvailableProducts]; 

} 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 


// Dispose of any resources that can be recreated. 


j 


-(void)fetchAvailableProducts{ 
NSSet *productIdentifiers = [NSSet 
setwithObjects:kTutorialPointProductID, nil]; 
productsRequest = [[SKProductsRequest alloc] 
initWithProductIdentifiers:productIdentifiers]; 
productsRequest.delegate = self; 
[productsRequest start]; 


- (BOOL)canMakePurchases 
{ 

return [SKPaymentQueue canMakePayments ]; 
} 


(void)purchaseMyProduct: (SKProduct*)product( 
if ([self canMakePurchases]) { 
SKPayment *payment = [SKPayment paymentWithProduct: product. 
[[SKPaymentQueue defaultQueue] addTransactionObserver:self: 
[[SKPaymentQueue defaultQueue] addPayment : payment]; 


} 

else{ 
UIAlertView *alertView = [[UIAlertView alloc]initwithTitle 
Q"Purchases are disabled in your device" message:nil deleg: 
self cancelButtonTitle:Q"Ok" otherButtonTitles: nil]; 
[alertView show]; 

} 


-(IBAction)purchase: (id)sender{ 
[self purchaseMyProduct:[validProducts objectAtIndex:0]]; 
purchaseButton.enabled - NO; 


j 


4pragma mark StoreKit Delegate 


-(void)paymentQueue:(SKPaymentQueue *)queue 
updatedTransactions:(NSArray *)transactions { 
for (SKPaymentTransaction *transaction in transactions) { 
Switch (transaction.transactionState) { 
case SKPaymentTransactionStatePurchasing: 
NSLog(Q"Purchasing"); 
break; 
case SKPaymentTransactionStatePurchased: 
if ([transaction.payment.productIdentifier 
isEqualToString:kTutorialPointProductID]) { 
NSLog(Q"Purchased "); 
UIAlertView *alertView - [[UIAlertView alloc]in: 
Q"Purchase is completed succesfully" message:ni. 
self cancelButtonTitle:Q"Ok" otherButtonTitles: 
[alertView show]; 


[[SKPaymentQueue defaultQueue] finishTransaction:ti 


break; 
case SKPaymentTransactionStateRestored: 
NSLog(@"Restored "); 
[[SKPaymentQueue defaultQueue] finishTransaction:ti 
break; 
case SKPaymentTransactionStateFailed: 
NSLog(Q"Purchase failed "); 
break; 
default: 
break; 


j 


-(void)productsRequest:(SKProductsRequest *)request 
didReceiveResponse:(SKProductsResponse *)response 


SKProduct *validProduct - nil; 
int count - [response.products count]; 
if (count>0) { 

validProducts = response.products; 

validProduct = [response.products objectAtIndex:0]; 

if ([validProduct.productIdentifier 

isEqualToString:kTutorialPointProductID]) { 
[productTitleLabel setText:[NSString stringWithFormat: 
@"Product Title: %@",validProduct.localizedTitle]]j; 
[productDescriptionLabel setText:[NSString stringWithF: 
@"Product Desc: %@",validProduct.localizedDescription]_ 
[productPriceLabel setText:[NSString stringWithFormat: 
@"Product Price: %@",validProduct.price]]; 
} 
} else { 

UIAlertView *tmp = [[UIAlertView alloc] 
initWithTitle:@"Not Available" 
message:Q"No products to purchase" 
delegate:self 
cancelButtonTitle:nil 
otherButtonTitles:Q"Ok", nil]; 

[tmp show]; 

} 
[activityIndicatorView stopAnimating]; 
purchaseButton.hidden - NO; 


} 
@end 
PD E 


注意 : 需要 修改 你 创建 In-App Pur 〈 应 用 内 购买 ) BS kTutorialPointProductID . 38 
过 修改 fetchAvailableProducts 产 品 标识 符 的 NSSet, 你 可 以 添加 多 个 产品 。 





输出 


运行 该 应 用 程序 ,输出 结果 如 下 


Dey 






11:50 AM 


Product Title: Tutorial Product 
Product Desc: A Test product 


Product Price: 0.99 


initiate Purchase 





确保 已 经 中 登录 。 单 击 购买 选择 现 有 的 Apple ID。 输 入 有 效 的 测试 帐户 的 用 户 名 和 
密码 。 几 秒 钟 后 ， 显 示 下 面 的 信息 


Confirm Your In-App 
Purchase 
Do you want to buy one 
tutorialspoint product for $0.997 


[Environment: Sandbox] 


Cancel Buy 





一 旦 产品 成 功 购买 ， 将 获得 以 下 信息 。 可 以 在 显示 此 信息 的 地 方 ， 更 新 应 用 功能 相 
关 的 代码 


Purchase is completed 
succesfully 
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IAD 是 葵 果 推出 的 广告 平台 ， 它 可 以 帮助 开发 者 从 应 用 程序 中 获取 收入 。 


实例 步 又 
1. 创建 一 个 简单 的 View based application 
2. 选择 项 目 文件 ， 然 后 选择 目标 ， 然 后 选择 框架 并 添加 iAd.framework。 


3. 更 新 ViewController.h 如 下 所 示 
#import <UIKit/UIKit.h> 
#import <iAd/iAd.h> 


Qinterface ViewController : UIViewController<ADBannerViewDelegate> 


( 


} 
@end 


I 
4. 更 新 ViewControllerm ， 如 下 所 示 


ADBannerView *bannerView; 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 
Qimplementation ViewController 
- (void)viewDidLoad 
[super viewDidLoad]; 
bannerView - [[ADBannerView alloc]initWithFrame: 
CGRectMake(0, 0, 320, 50)]; 
// Optional to set background color to clear color 


[bannerView setBackgroundColor:[UIColor clearColor]]; 
[self.view addSubview: bannerView]; 


j 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


j 


#pragma mark - AdViewDelegates 
-(void)bannerView:(ADBannerView *)banner 


didFailToReceiveAdWithError:(NSError *)error{ 
NSLog(Q"Error loading"); 
j 


-(void)bannerViewDidLoadAd:(ADBannerView *)banner{ 
NSLog(Q"Ad loaded"); 


-(void)bannerViewWillLoadAd:(ADBannerView *)banner{ 
NSLog(@"Ad will load"); 


-(void)bannerViewActionDidFinish:(ADBannerView *)banner{ 
NSLog(@"Ad did finish"); 


} 
@end 


输出 
运行 该 应 用 程序 ,得 到 如 下 输出 结果 : 


4:28 PM 





IOS GamekKit 


间 J I 
GamekKit 是 iOS SDK 中 一 个 常用 的 框架 。 其 核心 功能 有 3 个 : 
e 交互 游戏 平台 Game Center, 


e P2P 设 各 通讯 功能 
e In-Game Voice, 


实例 步 又 
1. 在 链接 iTunes 时 请 确保 拥有 一 个 唯一 的 App ID ( unique App ID) , App ID 在 我 
们 应 用 程序 更 新 bundle ID 时 及 在 Xcode 代码 签名 与 相应 的 配置 文件 需要 使 用 到 。 


人 在 添加 新 的 应 用 程序 文档 可 以 了 解 更 多 
天 信息 。 


3. 打 开 你 申请 的 application, 点 击 Manage Game Center 选 项 。 进 入 后 点 击 Enable 
Game Center 使 你 的 Game Center 生 效 。 接 下 来 设置 自己 的 Leaderboard 和 
Achievements。 


4. 下 一 步 涉 及 义理 代码 ， 并 为 我 们 的 应 用 程序 创建 用 户 界面 。 
5. 创 建 一 个 single view application， 并 输入 bundle identifier 。 
6. 更 新 ViewController.xib， 如 下 所 示 


s. jd > F4 GameKitDemo .. |GameKitDemo ViewController.xib ViewController.xib (English) View 





© Placeholders 


File's Owner 
p First Responder 


rr] Objects 


Ud Los 


Show Leaderboard 


Update score 





7. 选 择 项 目 文件 ， 然 后 选择 目标 ， 然 后 添加 GameKit.framework 
8. 为 已 添加 的 按钮 创建 IBActions 
9. 更 新 ViewControllerh 文 件 ， 如 下 所 示 


#import «UIKit/UIKit.h» 
#import <GameKit/GameKit .h> 


@interface ViewController : UIViewController 
<GKLeaderboardViewControllerDelegate> 


-(IBAction)updateScore:(id)sender; 
- (IBAction)showLeaderBoard:(id)sender; 


Qend 


10.835: ViewController.m ， 如 下 所 示 


#import "ViewController.h" 


@interface ViewController () 


Qend 
Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 
if([GKLocalPlayer localPlayer].authenticated -- NO) 


[[GKLocalPlayer localPlayer] 
authenticatewithCompletionHandler:^(NSError *error) 


{ 
NSLog(@"Error%@", error); 
jl; 
j 
j 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


- (void) updateScore: (int64 t) score 
forLeaderboardID: (NSString*) category 
{ 
GKScore *scoreObj = [[GKScore alloc] 
initWithCategory:category]; 
scoreObj.value - score; 
scoreObj.context - 0; 
[scoreObj reportScorewithCompletionHandler:^(NSError *error) { 
// Completion code can be added here 
UIAlertView *alert - [[UIAlertView alloc] 
initWithTitle:nil message:Q"Score Updated Succesfully" 
delegate:self cancelButtonTitle:Q"Ok" otherButtonTitles: n: 
[alert show]; 


HH 


- (IBAction)updateScore: (id)sender { 
[self updateScore:200 forLeaderboardID:@"tutorialsPoint"]; 
} 


-(IBAction)showLeaderBoard:(id)sender{ 
GKLeaderboardViewController *leaderboardViewController = 
[[GKLeaderboardViewController alloc] init]; 
leaderboardViewController.leaderboardDelegate - self; 
[self presentModalViewController: 
leaderboardViewController animated:YES]; 


j 


4pragma mark - Gamekit delegates 

- (void)leaderboardViewControllerDidFinish: 

(GKLeaderboardViewController *)viewController{ 
[self dismissModalViewControllerAnimated:YES]; 











12:02 PM 


Show Leaderboard 


Update score 





当 我 们 单 击 显示 排行 榜 时 ， 屏 幕 显示 如 下 : 


Game Center | Done | 


Achievements | Challenges 


MIS WEEK 


: “fragility 


"Xisorz 


umarmara" 





当 我 们 点 击 更 新 分 数 ， 比 分 将 被 更 新 到 我 们 排行 榜 上 ， 我 们 会 得 到 一 个 信息 ， 如 下 
图 所 示 


ore Updated Succestully 


OK 


odi 








lOS 故事 板 (Storyboards) 
Storyboards# iOS 5 中 才 有 介绍 ， 当 我 们 用 Storyboards 时 ， 部 署 目 标 应 该 是 
iOS5.0 或 更 高 版 本 。 


Storyboards 帮助 我 们 了 解 视觉 流动 的 画面 ， 在 界面 为 
MainStoryboard.storyboard 下 创建 所 有 应 用 程序 屏幕 。 


实例 步骤 
1. 创建 一 个 single view application， 创 建 应 用 程序 时 选择 storyboard 复 选 框 。 


2. 选择 MainStoryboard.storyboard， 在 这 里 你 可 以 找到 单一 视图 控制 器 。 添 加 一 个 
视图 控制 器 ， 更 新 视图 控制 器 ， 如 下 所 示 
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3. 连 接 两 个 视图 控制 器 。 右 键 单 击 "show modal (显示 模式 ) "按钮 ， 在 左 侧 视图 控 
制 器 将 其 拖 动 到 右 视 视图 控制 器 中 ,如 下 图 所 示 : 
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4. 现 在 从 如 下 所 示 的 三 个 显示 选项 中 选择 modal( 模 态 ) 


Back 


push 
modal 





custom 


Was Label 
a Si Button - Show modal 
Ó w Triggered Segues 
action 
v Outlet Collections 
gesturmiecognizeny 


Sent Events 

Did End On Exit 

[5 n Changed 

Editing Did Begin 

cdring Did End 

Touch Cancel 

Touch Down 

Touch Down Repeat 

Touch Drag Enter 

Touch Drag Ext 

Touch Drag Inside 

Touch Drag Outside 

Touch Up inside 

Touch Up Outside 

Valet Changed 

Referencing Outlets 

New Referencing Ouutiet 
Referencing Outlet Collections 
Mew Referencing Outtet Collection ntroller 





5. 更 新 ViewController.h 如 下 所 示 


#import «UIKit/UIKit.h» 
@interface ViewController : UIViewController 
-(IBAction)done:(UIStoryboardSegue *)seque; 


Qend 


6. 更 新 ViewController.m 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


( 


[super viewDidLoad]; 


- (void)didReceiveMemoryWarning 


( 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 
} 
-(IBAction)done:(UIStoryboardSegue *)seque( 
[self.navigationController popViewControllerAnimated:YES]; 
} 


Qend 


7. 选 择 "MainStoryboard.storyboard"， 并 右键 点 击 "Exit "按钮 ， 在 右 侧 视图 控制 器 中 
选择 和 连接 后 退 按钮 ， 如 下 图 所 示 


Show modal 


View Controller 


v Presenting Segues 
dome 





输出 
在 iPhone 设备 中 运行 该 应 用 程序 ,得 到 如 下 输出 结果 
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自动 布局 在 iOS 6.0 中 引入 ， 仅 可 以 支持 IOS6.0 及 更 高 版 本 。 它 可 以 帮助 我 们 创建 
用 于 多 个 种 设备 的 界面 。 


实例 步骤 
1. 创 建 一 个 简单 的 View based application 
2. 修 改 ViewControllerm 的 文件 内 容 ， 如 下 所 示 


#import "ViewController.h" 

Qinterface ViewController () 

@property (nonatomic, strong) UIButton *leftButton; 
@property (nonatomic, strong) UIButton *rightButton; 
@property (nonatomic, strong) UITextField *textfield; 


@end 
@implementation ViewController 


- (void)viewDidLoad{ 
[super viewDidLoad]; 
UIView *superview - self.view; 
/*1N. Create leftButton and add to our view*/ 
self.leftButton = [UIButton buttonWithType: UIButtonTypeRoundedt 
self.leftButton.translatesAutoresizingMaskIntoConstraints = NO, 
[self.leftButton setTitle:@"LeftButton" forState:UIControlState 
[self .view addSubview:self.leftButton]; 
/* 2N. Constraint to position LeftButton's X*/ 
NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttribute( 
relatedBy:NSLayoutRelationGreaterThanOrEqual toltem:superview é 
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f]; 
/* 3\. Constraint to position LeftButton's Y*/ 
NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttribute( 
relatedBy:NSLayoutRelationEqual toItem:superview attribute: 
NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]; 
/* 4N. Add the constraints to button's superview*/ 
[superview addConstraints:Q[ leftButtonXConstraint, 
leftButtonYConstraint]]; 
/*5N. Create rightButton and add to our view*/ 
self.rightButton = [UIButton buttonwithType:UIButtonTypeRoundet 
self.rightButton.translatesAutoresizingMaskIntoConstraints = N( 
[self.rightButton setTitle:@"RightButton" forState:UIControlSt: 


[self.view addSubview:self.rightButton]; 

/*6N. Constraint to position RightButton's X*/ 
NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstrair 
constraintWithItem:self.rightButton attribute:NSLayoutAttribute 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview é 
NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f]; 

/*7\. Constraint to position RightButton's Y*/ 
rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh; 
NSLayoutConstraint *centerYMyConstraint - [NSLayoutConstraint 
constraintWithItem:self.rightButton attribute:NSLayoutAttribute 
relatedBy:NSLayoutRelationGreaterThanOrEqual toltem:superview é 
NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]; 
[superview addConstraints:Q[centerYMyConstraint, 
rightButtonXConstraint]]; 
//8N. Add Text field 

self.textfield = [[UITextField alloc]initWithFrame: 
CGRectMake(0, 100, 100, 30)]; 

self.textfield.borderStyle = UITextBorderStyleRoundedRect; 
self.textfield.translatesAutoresizingMaskIntoConstraints = NO; 
[self.view addSubview:self.textfield]; 

//9\. Text field Constraints 

NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstrair 
constraintWithItem:self.textfield attribute:NSLayoutAttributeT« 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview 
attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f]; 
NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConst! 
constraintWithItem:self.textfield attribute:NSLayoutAttributeTt 
relatedBy:NSLayoutRelationGreaterThanOrEqual toltem:self.rightt 
attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f], 
NSLayoutConstraint *textFieldLeftConstraint - [NSLayoutConstra: 
constraintWithItem:self.textfield attribute:NSLayoutAttributeLe 
relatedBy:NSLayoutRelationEqual toItem:superview attribute: 
NSLayoutAttributeLeft multiplier:1.0 constant:30.0f]; 
NSLayoutConstraint *textFieldRightConstraint - [NSLayoutConstr: 
constraintWithItem:self.textfield attribute:NSLayoutAttributeR: 
relatedBy:NSLayoutRelationEqual toItem:superview attribute: 
NSLayoutAttributeRight multiplier:1.0 constant:-30.0f]; 
[superview addConstraints:Q[textFieldBottomConstraint , 
textFieldLeftConstraint, textFieldRightConstraint, 
textFieldTopConstraint]]; 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


} 
@end 
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运行 应 用 程序 ， 在 iPhone 模拟 器 上 会 有 下 面 的 输出 结果 





LeftButton RightButton 





当 我 们 更 改 模拟 器 为 横向 的 方向 时 ， 输 出 结果 如 下 
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LeftButton RightButton 
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我 们 在 iPhone 5 模拟 器 上 运行 同一 应 用 程序 时 ,输出 结果 如 下 
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当 我 们 更 改 模拟 器 为 横向 的 方向 时 ， 输 出 结果 如 下 : 
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LeftButton RightButton 
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eee ae 0, 而 Facebook 已 经 被 集成 在 iOS 6.0 中 。 本 教程 的 重点 讲 
解 如 何 利用 茶 果 提供 的 类 在 iOS5.0 和 iOS6.0 中 部 署 Twitter 和 Facebook。 

实例 步骤 

1. 创建 一 个 简单 View based application 


选择 项 目 文件 ， 然 后 选择 "targets( 目 标 )"， 然 后 在 choose frameworks (选择 框 
x) 中 添加 Social. framework 和 Accounts. framework 


3. 添加 两 个 名 为 facebookPost 和 twitterPost 的 按钮 ， 并 为 他 们 创建 ibActions。 
4. 更 新 ViewController.h 如 下 


#import <Social/Social.h> 

#import <Accounts/Accounts.h> 

#import «UIKit/UIKit.h» 

@interface ViewController : UIViewController 


-(IBAction)twitterPost:(id)sender; 
-(IBAction)facebookPost:(id)sender; 


Qend 


5. 更 新 ViewControllerm ， 如 下 所 示 


#import "ViewController.h" 
Qinterface ViewController () 
Qend 

Qimplementation ViewController 
- (void)viewDidLoad 


[super viewDidLoad]; 


- (void)didReceiveMemoryWarning 


[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 


j 
-(IBAction)facebookPost:(id)sender( 


SLComposeViewController *controller = [SLComposeViewController 
composeViewControllerForServiceType:SLServiceTypeFacebook]; 
SLComposeViewControllerCompletionHandler myBlock - 
^(SLComposeViewControllerResult result) { 


if (result == SLComposeViewControllerResultCancelled) 
t 
NSLog(Q"Cancelled"); 


else 
{ 
NSLog(Q"Done"); 
} 
[controller dismissViewControllerAnimated:YES completion 
3 

controller.completionHandler -myBlock; 
//Adding the Text to the facebook post value from iOS 
[controller setInitialText:@"My test post"]; 
//Adding the URL to the facebook post value from iOS 
[controller addURL:[NSURL URLWithString:Q"http://www.test.com"]: 
//Adding the Text to the facebook post value from iOS 
[self presentViewController:controller animated:YES completion:ir 


j 


-(IBAction)twitterPost:(id)sender( 
SLComposeViewController *tweetSheet - [SLComposeViewController 
composeViewControllerForServiceType:SLServiceTypeTwitter]; 
[tweetSheet setInitialText:@"My test tweet"]; 


[self presentModalViewController:tweetSheet animated:YES]; 
j 


Qend 





村 该 应 用 程序 并 单 击 facebookPost 时 我 们 将 获得 以 下 输出 


Cancel Facebook 


"f Add Location Friends AX 


SoS ry 
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当 我 们 单 击 twitterPost 时 ， 我 们 将 获得 以 下 输出 





My test tweet 


"f Add Location 
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IOS 内 存 管 理 


iOS 下 内 存 管 理 的 基本 思想 就 是 引用 计数 ， 通 过 对 象 的 引用 计数 来 对 内 存 对 象 的 生 
命 周期 进行 控制 。 具 体 到 编程 时 间 方 面 ， 主 要 有 两 种 方式 : 


1: MRR (manual retain-release) ， 人 工 引 用 计数 ， 对 象 的 生成 、 销 毁 、 引 用 计 
数 的 变化 都 是 由 开发 人 员 来 完成 。 


2 : ARC (Automatic Reference Counting) ， 自 动 引用 计数 ， 只 负 no A 
其 他 过 程 开 发 人 员 不 再 需要 关心 其 销毁 ， 使 用 方式 类 似 于 垃圾 回收 ， 但 其 实质 还 
引用 计数 。 

面临 的 问题 

根据 芋 果 说 明文 档 ， 面 临 的 两 个 主要 问题 是 : 


释放 或 履 盖 的 数据 仍然 在 使 用 。 这 将 造成 内 存 损坏 ， 通 常 在 应 用 程序 崩溃 ， 或 者 更 
糟 ， 损 坏 用 户 数据 。 


不 释放 不 再 使 用 的 数据 会 导致 内 存 泄漏 。 分 配 的 内 存 ， 内 存 泄 漏 不 会 释放 ， 即 使 它 
从 来 没有 再 次 使 用 。 港 漏 会 导致 应 用 程序 的 内 存 使 用 量 日 益 增 加 ， 这 反 过 来 又 可 能 
会 导致 系统 性 能 较 差 或 死机 。 


内 存 管 理 规 则 

我 们 创建 自己 的 对 象 ， 当 他 们 不 再 需要 的 时 候 ， 释 放 他 们 。 
保留 需要 使 用 的 对 象 。 如 果 没 有 必要 必须 释放 这 些 对 象 。 

不 要 释放 我 们 没有 拥有 的 对 象 。 

使 用 内 存 管 理工 具 

可 以 用 Xcode 工具 仪器 的 帮助 下 分 析 内 存 的 使 用 情况 。 它 包括 的 工具 有 活动 监视 
器 ， 分 配 ， 汇 漏 ， 僵 尸 等 

分 析 内 存 分 配 的 步骤 


1. 打开 一 个 现 有 的 应 用 程序 。 
2. 选择 产品 ， 配 置 文件 如 下 所 示 
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Choose Trace Template or Existing Document: 


a 105 Simulator 
"I j 

Memory 

CPU 

File System 


BEES 


Time Profiler System Trace Automation 


出 Allocations 


This template measures heap memory usage by tracking allocations, including specific 
object allocations by class. It also can record virtual memory statistics by region. 

















lis Cancel) 
4. 我 们 可 以 看 到 不 同 对 象 的 内 存 使 用 情况 
5. 你 可 以 切换 视图 控制 器 查看 内 存 是 否 释放 。 


lOSAF EH 
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6. 同 样 我 们 可 以 使 用 Activity Monitor 来 查看 内 存在 应 用 程序 中 的 分 配 的 情况 。 


eoo a 
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IOS 应 用 程序 调试 
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当 我 们 做 应 用 程序 的 时 候 ， 可 能 会 犯 各 种 错误 ， 这 可 能 会 导致 各 种 不 同 的 错误 。 因 
此 ， 为 了 修复 这 些 错误 或 缺陷 ， 我 们 需要 来 调试 应 用 程序 。 


选择 一 个 调试 十 


Xcode 中 调试 器 即 GDB 和 LLDB 调试 器 ，GDB 是 默认 的 。 us ie E 
LLVM 开 源 的 编译 器 项 目的 一 部 分 。 您 可 以 更 改 调试 ， 编 辑 活动 计划 选 


如 何 查找 编码 错误 ? 


我 们 只 需要 建立 我 们 的 应 用 程序 ， 代 码 被 编译 器 编译 ， 所 有 的 消息 ， 错 误 和 和 警告 将 
显示 以 及 错误 的 原因 ， 我 们 可 以 纠正 他 们 。 可 以 点 击 product， 然 后 点 击 "分 析 "， 将 
在 应 用 程序 中 可 能 发 生 的 问题 。 


i IE ST RA 


Bi a PTR AT] 7 BERT SIE IA, PER ATER SARI, DEZ HA 
不 同 状 态 。 我 们 只 需要 点 击 创 建 一 个 断 点 的 行 号 。 我 们 可 以 通过 点 击 并 拖 动 它 删除 
断 点 。 如 下 所 示 





k z © A zi» 2:4 LlAedioAed'Video —— AudoAndVideo m ViewContreber m — 7] -dafieceieMemoryWaeneg 
| "m. AudieAndVideo - 一 一 一 一 一 T , COpyrignt "tt? 2013 ^ ro Tet on Tame. Ail TIOPYTS DSTI. ——— 
Mem 
- Corto m 
playAudio o #inport 
Qinterfa 0 
Ben 


Bisplenentation ViewController 


~ (void)viewDidload 

{ 

5 r flood}; 

[self y conill; 

ti any additional setup 


(void)didReceiveMemoryWarning 
1 


[super iP M. ryw 3l; 
) 
-[IBAct ion) playAw dio t (id) sender{ 
NSStr *poth = isu dle e] Forf 10" audioTest 
:@"293" 
= {tay "s linitWit! 
Pat ot t tNULL J; 
=> [ l; 
(1BAct ion) playVideo: (id)sender{ 
spath = [ [NSA ink ile] pa 189" splashVideo2x" 
ype:e" eov") ; 
[ (MPMov t yer Lew ] twi [ 
Pathzpath]]; 
[sel ! wCont nated:NO} 
} 
eer 


当 我 们 运行 应 用 程序 并 选择 playVideo， 按 钮 的 应 用 程序 将 被 上 暂停， 我 们 来 分 析 一 下 
我 们 的 应 用 程序 的 状态 。 当 断 点 被 触发 时 ， 我 们 将 得 到 一 个 输出 ， 如 下 图 所 示 
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I: 22 start end 
Thread 3 
> M com acce ah manage! Bimplementation ViewController 


Thread 5 WebThread 
osos - (void)viewDidLoad 
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> MW Thread 8 
[super viewbidloodh; 
[self playVideor:nil]; 
// Do any additional setup after loading the view, typically from a nib. 
} 
~ (void)didReceiveMemoryWarning 
t 
[super didReceiveMenoryWarning) ; 
// Disposm of any resources that can be recreate 
) 
~{TBctioniplayhudios tse) sender 
ring n [INSBundle mainBundle]pathForResource:g" audioTest 
fType 3"); 
"] sudioPlayer = [[AVAudioPlayer. alloc]initWithContentsOfURL : INSUAL 
fileURLWithPath:path] errortMULL] ; 
[audioPlayer play]; [^ thvead ! breakenint 1-1] 
) 
-(IBAct ion) playVideo: (id) sender{ 
ing epath = [[NSBundle mainBundle]pathForResource:d" splashVideo2x" 
fTvpe: e" mov" : 
mov ieP\ linitwithContentURL : [NSUR 
[self mated:NO)}; 
) 
gend 
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Auto > à A3 Outpt $ Cer OBO 
— p ense ew envwer vos 
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b D sender = 0d) 0408684250 Warning) Attempt to presest 
e nN aioviepPtayerYievcentrotter PrBiSdibt> «^ 
» GB paih ~ INSSmmg *) 0x00000000 «ViewCestreller: @xBSetdtt= whese view is not is the 
> [3 audioPlayer = (AVAudioPuyer *) 0400000000 window hierarchy! 
im = O = Lice 


可 以 轻松 地 确定 哪个 线程 触发 断 点 。 在 底部 可 以 看 到 对 象 ， 如 self，sender 等 ， 这 
些 持 有 相应 的 对 象 的 值 ， 我 们 可 以 展开 一 些 这 些 对 象 ， 看 看 他 们 每 个 的 状态 是 什 


Ao 


要 继续 应 用 程序 ， 我 们 在 调试 区 选择 继续 按钮 〈 最 左边 的 按钮 ) ， 如 下 图 所 示 。 其 
他 选项 包括 步骤 和 单 步 跳 过 


我 们 也 有 异常 断 点 ， 触 发 应 用 程序 停止 发 生 异 常 的 位 置 。 通 过 选择 调试 导航 后 选 
择 "+" 按 钮 ， 我 们 可 以 创建 异常 断 点 。 将 得 到 下 面 的 窗口 


TutorialsPoint 移动 端 教程 








No Breakpoints | 后 











Add Exception Breakpoint 


Add Symbolic Breakpoint... 


然后 ， 我 们 需要 选择 " Exception Breakpoint (添加 异常 )" 断 点 ， 它 会 显示 下 面 的 窗口 








_m@ 2 6 4 =} 
AudioAndVideo 

1 Breakpoint 

Ex All Exceptions 
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M Exception Breakpoint 

Exception (All 5 
Break (On Throw +) 
Action | Add Action - 


Options | | Automatically continue after evaluating s 
' Done 


下 一 步 是 什么 ? 
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你 可 以 在 Xcode 4 用 户 指南 知道 更 多 关于 调试 和 其 他 Xcode 功能 的 知识 。 


w3school jQuery Mobile 教程 


来 源 : jQuery Mobile 教程 
整理 : 飞龙 


jQuery Mobile 简介 


jQuery Mobile 是 一 个 用 于 创建 移动 端 web 应 用 的 的 前 端 框架 。 


学 习 本 教程 前 你 需要 先 了 解 


在 开始 学 习 jQuery Mobile 前 , 你 应 该 了 解 一 下 基础 知识 : 


e HTML 
e CSS 
e jQuery 


如 果 你 想 学 习 这 些 知识 ， 你 可 以 访问 本 站 的 首页 。 


什么 是 jQuery Mobile? 


jQuery Mobile 是 针对 触 屏 智能 手机 与 平板 电脑 的 网 页 开发 框架 。 
jQuery Mobile 工作 与 所 有 主流 的 智能 手机 和 平板 电脑 上 : 


s 
a ;OS ‘im aqn23aolD “f BlackBerry. Qua 


加 Windows Phone palm web C symbian MeeGo 


jQuery Mobile 构建 于 jQuery 以 及 jQuery UI 类 库 之 上 ， 如 果 您 了 解 jQuery， 您 可 
以 很 容易 的 学 习 jQuery Mobile。 


jQuery Mobile 使 用 了 极 少 的 HTML5, CSS3, JavaScript 和 AJAX 脚本 代码 来 完 
成 页 面 的 布局 泻 染 。 


为 什么 使 用 jQuery Mobile? 


通过 使 用 jQuery Mobile 可 以 " 写 更 少 的 代码 ， 做 更 多 的 事情 " : 它 可 以 通过 一 个 灵活 
及 简单 的 方式 来 布局 网 页 ， 且 兼容 所 有 移动 设备 。 


9 不 同 设备 使 用 了 不 同 开 发 语言 ，jQuery Mobile 可 以 很 好 的 兼容 不 容 的 设备 
或 操作 系统 : 
e Android 和 Blackberry (ER) 使 用 JAVA 语言 。 


e iOS 使 用 Objective C 语言 
e Windows Phone 使 用 C# 和 .net, 等 。 


jQuery Mobile 解决 了 不 同 设备 兼容 的 问题 ， 因 为 它 只 使 用 HTML，CSS 和 
JavaScript， 这 是 所 有 移动 网 络 浏览 器 的 标准 ! 
最 好 的 阅读 体验 


尽管 jQuery Mobile 兼 容 所 有 的 移动 设备 ， 但 是 并 不 能 完全 兼容 PC 机 (由 于 有 限 的 
CSS3 支 持 ) 。 


为 了 更 好 的 阅读 本 教程 ， 建 议 您 使 用 Google Chrome 浏览 器 。 


jQuery Mobile 安装 


在 你 的 网 页 中 添加 jQuery Mobile 


你 可 以 通过 以 下 几 种 方式 将 jQuery Mobile 添 加 到 你 的 网 页 中 : 


e 从 CDN 中 加 载 jQuery Mobile (推荐 ) 
e 从 jQuerymobile.com 下 载 jQuery Mobile X 


从 CDN 中 加 载 jQuery Mobile 


9 CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 
是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 
容 传输 的 更 快 、 更 稳定 。. 


使 用 jQuery AK, 你 不 需要 在 电脑 上 安装 任何 东西 ; 你 仅仅 需要 在 你 的 网 页 中 加 载 
DARE & 3x (.css) 和 JavaScript 库 (js) 就 能 够 使 用 jQuery Mobile: 


jQuery Mobile CDN: 


<head> 

«link rel="stylesheet" hrefz"http://code.jquery.com/mobile/1.3.2/j« 
«script src="http://code. jquery.com/jquery-1.8.3.min.js"></script> 
«script src="http://code. jquery.com/mobile/1.3.2/jquery.mobile-1.3 
</head> 


ae 
下 载 jQuery Mobile 


如 果 你 想 将 jQuery Mobile 放 于 你 的 主机 中 ,你 可 以 从 jQuerymobile.com 下 载 该 文 
件 。 





<head> 

«link rel=stylesheet href-jquery.mobile-1.3.2.css» 
«script src=jquery.js></script> 

«script src=jquery.mobile-1.3.2.js></script> 
«/head» 


提示 : 将 下 载 的 文件 放置 于 与 网 页 同一 目录 下 。 


TutorialsPoint 移动 端 教程 
q 你 是 否 想 知道 为 什么 在 «script» 标签 中 没有 插入 typez"text/javascript" 
? 


在 HTML5 已 经 不 需要 该 属性 。 JavaScript 在 所 有 现代 浏览 器 中 是 HTML5 的 
默认 脚本 语言 ! 
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jQuery Mobile 页 面 
开始 学 习 jQuery Mobile 


9 尽管 jQuery Mobile 兼 容 所 有 的 移动 设备 ， 但 是 并 不 能 完全 兼容 PC 机 (H 
于 有 限 的 CSS3 支 持 ) 。 


为 了 更 好 的 阅读 本 教程 ， 建 议 您 使 用 Google Chrome 浏览 器 。 
实例 


<body> 
<div data-role="page"> 


<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 
«/div» 


«div data-role="content"> 
<p> 我 现在 是 一 个 移动 端 开发 者 !!</p> 
«/div» 


«div data-role="footer"> 
<h1> 底 部 文本 </h1> 
«/div» 


«/div» 
«/body» 


实例 解析 : 


e data-role-"page" 是 在 浏览 器 中 显示 的 页 面 。 

data-role="header" 是 在 页 面 顶部 创建 的 工具 条 (通常 用 于 标题 或 者 搜索 按钮 ) 
data-role="content" 定义 了 页 面 的 内 容 ， 上 比如 文本 ， 图 片 ， 表 单 ， 按 钮 等 。 
data-role="footer" 用 于 创建 页 面 底部 工具 条 。 

在 这 些 容 器 中 你 可 以 添加 任何 HTML 元 素 - 段落 , 图 片 , 标题 , 列表 等 。 


@ jQuery Mobile 依赖 HTML5 data-* 属性 来 支持 各 种 UI 元素、 过渡 和 页 面 
结构 。 不 支持 它们 的 浏览 器 将 以 静默 方式 弃 用 它们 。 


在 页 面 中 添加 jQuery Mobile 


使 用 jQuery Mobile, 你 可 以 再 单个 HTML 文件 中 创建 多 个 不 同 的 页 面 。 
你 可 以 使 用 不 同 的 href 属 性 来 区 分 使 用 同一 个 唯一 id 的 页 面 : 


例 


将 


«div data-role-"page" id="pageone"> 
<div data-role="content"> 
<a href="#pagetwo">Go to Page Two</a> 
</div> 
</div> 
<div data-role="page" id="pagetwo"> 
<div data-role="content"> 


<a href="#pageone">Go to Page One</a> 
</div> 
</div> 


注意 : 当 web 应 用 有 大 量 的 内 容 (MA, BA, WAS) 将 会 严重 影响 加 载 时 间 。 
如 果 你 不 想 使 用 内 页 链接 可 以 使 用 外 部 文件 : 


«a href="externalfile.html"> 访 问 外 部 文件 </a> 


页 面 作为 对 话 框 使 用 


对 话 框 是 用 于 显示 页 面 信息 显 示 或 者 表单 信息 的 输入 。 
在 链接 中 添加 data-rel="dialog" 让 用 户 点 击 链接 时 弹出 对 话 框 : 


例 


将 


«div data-role-"page" id="pageone"> 
«div data-role="content"> 
«a href="#pagetwo" data-rel="dialog">Go to Page Two</a> 
«/div» 
«/div» 


«div data-role="page" id="pagetwo"> 
<div data-role="content"> 
<a href="#pageone">Go to Page One</a> 
</div> 
</div> 


jQuery Mobile 页 面 切换 


jQuery Mobile 包含 CSS3 效果 让 您 选择 页 面 打 开 的 方式 。 


jQuery Mobile 页 面 切 换 效 果 
jQuery Mobile 提供 了 各 种 页 面 切换 到 下 一 个 页 面 的 效果 。 
注意 : 为 了 实现 页 面 切换 效果 ， 浏 览 器 必须 支持 CSS3 3D 切换 : 


e Internet Explorer 10 支持 3D 切换 (早期 版 本 不 支持 ) 
e Opera 不 支持 3D 切换 


页 面 切换 效果 可 被 应 用 于 任何 使 用 data-transition 属性 的 链接 或 表单 提交 : 


«a href="#anylink" data-transition="slide"> 切 换 到 第 二 个 页 面 </a> 


下 面 的 表格 显示 了 通过 使 用 data-transition 属性 后 可 用 的 页 面 切 换 : 


页 面 切换 描述 尝试 一 下 
fade 默认 。 淡 入 到 下 一 

flip 从 后 向 前 翻转 到 下 一 

flow 抛 出 当前 页 ， 进 入 下 一 页 
pop 像 弹 出 窗口 一 样 进入 下 一 
slide 从 右 到 左 滑动 到 下 一 
slidefade 从 右 到 左 滑动 并 淡 入 到 下 一 
slideup 从 下 到 上 滑动 到 下 一 
slidedown 从 上 到 下 滑动 到 下 一 

turn 翻 到 下 一 

none 没有 切换 效果 


9 在 jQuery Mobile 的 所 有 链接 上 ， 默 认 使 用 淡 入 淡出 的 效果 (如果 浏 览 器 
支持 ) o 


提示 : 上 面 的 所 有 效果 支持 后 退行 为 。 例 如 ， 如 果 您 想 要 页 面 从 左 向 右 滑动 ， 而 不 
是 从 右 向 左 滑动 ， 请 使 用 带 有 "reverse" 值 的 data-direction 属性 。 在 后 退 按钮 上 这 
是 默认 的 。 


将 


zl 


«a href="#pagetwo" data-transition="Slide" data-direction="reverse' 


— 一 








jQuery Mobile 按钮 
Mobile 占用 程序 是 建立 在 您 想 要 显示 的 简单 的 点 击 事物 上 。 


按钮 


信息 
底部 文本 


在 jQuery Mobile 中 创建 按钮 


在 jQuery Mobile 中 ， 按 钮 可 通过 三 种 方式 创建 : 


e 使 用 «button» 元 素 
。 使 用 <input> 元 素 
e 使 用 带 有 data-role="button" 的 «a» 元 素 


<button> 


<button> 按 钮 </button> 


«input» 


«input type="button" Value=" 按 钮 "> 


«a» 


«a href="#" gata-role-"button"'"»iZ4z«/a» 


q 在 jQuery Mobile 中 ， 按 钮 会 自动 样式 化 ， 让 它们 在 移动 设备 上 更 具 吸 引 
力 和 可 用 性 。 我 们 推荐 您 使 用 带 有 data-role="button" 的 «a» 元 素 在 页 面 间 
进行 链接 ， 使 用 «input» 或 «button» 元 素 进 行 表单 提交 。 


导航 按钮 


如 需 通 过 按钮 在 页 面 间 进行 链接 ， 请 使 用 带 有 data-role="button" 属性 的 «a» 元 


. 
7IN * 


实例 


«a href="#pagetwo" data-role="button"> 访 问 第 二 个 页 面 </a> 


内 联 按钮 


默认 情况 下 ， 按 钮 占 满 整个 屏幕 宽度 。 如 果 你 想 要 一 个 仅 是 与 内 容 一 祥 宽 的 按钮 ， 
或 者 如 果 您 想 要 并 排 显示 两 个 或 多 个 按钮 ， 请 添加 data-inline="true" : 


实例 


«a href="#pagetwo" data-role="button" data-inline-z"true"»izi]:8—" X 


DEA S pe 





组 合 按钮 


jQuery Mobile 提供 了 一 个 简单 的 方法 来 将 按钮 组 合 在 一 起 。 


请 把 data-role="controlgroup" 属性 和 data-type="horizontallvertical" 一 起 使 用 来 规 
定 是 否 水 平 或 垂直 组 合 按钮 : 


实例 


«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#anylink" data-role="button">t42 1</a> 

<a href="#anylink" data-role="button">t%42 2</a> 

<a href="#anylink" data-role="button">t%42 3</a> 
</div> 


9 默认 情况 下 ， 组 合 按钮 是 垂直 组 合 ， 它 们 之 间 没 有 外 边 距 和 空间 。 并 且 只 
有 第 一 个 和 最 后 一 个 按钮 是 圆 角 ， 以 便 它 们 组 合 在 一 起 的 时 候 创 建 一 个 漂亮 的 
外 观 。 


后 退 按钮 


如 需 创建 后 退 按钮 ， 请 使 用 data-rel="back" 属性 〈 这 会 忽略 锚 的 href 值 ) 
实例 


«a href="#" data-role="button" data-relL="back"> 返 回 </a> 


更 多 用 于 按钮 的 data-* 属性 


属性 值 描述 实例 
data-corners true | false 规定 按钮 是 否 圆 角 
data-mini true | false 规定 按钮 是 否 更 小 
data-shadow true | false 规定 按钮 是 否 有 阴影 


Y 


如 需 查看 所 有 jQuery Mobile data-* 属性 的 完整 
Mobile Data 属性 参考 手册 。 


下 一 章 演示 如 何 附加 图 标 到 您 的 按钮 上 。 


考 手 册 ， 请 访问 我 们 的 jQuery 


jQuery Mobile 按钮 图 标 
jQuery Mobile 提供 了 一 套 让 按钮 看 起 来 更 称心 如 意 的 图 标 。 


按钮 图 标 


主页 主页 搜索 
搜索 


底部 文本 


添加 图 标 到 jQuery Mobile 按钮 
如 需 添加 图 标 到 您 的 按钮 ， 请 使 用 data-icon 属性 : 

«a href="#anylink" data-role="button" data-icon="Search">Search</a: 
二 | 
提示 : 您 也 可 以 在 «button» 或 «input» 元 素 上 使 用 data-icon 属性 。 

下 面 我 们 列 出 一 些 jQuery Mobile 提供 的 可 用 图 标 : 


属性 值 描述 标 实例 
data-icon="arrow-|" 左 箭头 

data-icon="arrow-r" 右 箭头 

data-icon-"delete" 删除 

data-icon="info" 信息 

data-icon="home" 首页 

data-icon="back" 后 退 

data-icon="search" 搜索 


data-icon="grid" 网 格 


如 需 查 看 所 有 jQuery Mobile 按钮 图 标的 完整 参考 手册 ， 请 访问 我 们 的 jQuery 
Mobile 图 标 参考 手册 。 


定位 图 标 

您 也 可 以 规定 图 标定 位 在 按钮 的 什么 部 位 : 顶部 (top). Aw (right) 、 底 部 
(bottom) 、 左 侧 (left) 。 

请 使 用 data-iconpos 属性 来 指定 位 置 : 


图 标的 位 置 : 


«a href="#link" data-role="button" data-icon="Search" data-iconpos: 
«a href="#link" data-role="button" data-icon="Search" data-iconpos: 
«a href="#link" data-role="button" data-icon="Search" data-iconpos: 
«a href="#link" data-role="button" data-icon="Search" data-iconpos: 


JE 





9 默认 情况 下 ， 所 有 的 按钮 图 标 被 放置 到 左 侧 。 


只 显示 图 标 


0 果 只 想 显示 图 标 ， 请 设置 data-iconpos 为 "notext" : 


«a href="#link" data-role="button" data-icon="search" data-iconpos: 





jQuery Mobile 工具 栏 


jQuery Mobile 工具 栏 


工具 栏 元 素 通常 位 于 头 部 和 尾部 内 - 让 导航 易于 访问 : 


这 是 一 个 简单 的 弹 窗 |， 
阅读 教程 了 解 如 何 使 用 日 窗 ， 


头 部 栏 
头 部 栏 一 般 包 含 页 面 标题 /logo 或 一 两 个 按钮 (通常 是 首页 、 选 项 或 搜索 ) 。 
您 可 以 添加 按钮 到 头 部 的 左 侧 或 右 侧 。 


下 面 的 代码 ， 将 添加 一 个 按钮 到 头 部 标题 文本 的 左 侧 ， 添加 一 个 按钮 到 头 部 标题 文 
本 的 右 侧 : 


实例 


«div data-role="header"> 

<a href="#" data-role="button"> 首 页 </a> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 

«a href="#" data-role="button"> 搜 索 </a> 
</div> 


下 面 的 代码 ， 将 添加 一 个 按钮 到 关 部 标题 文本 的 左 侧 : 


<div data-role="header"> 

«a href="#" data-role="button"> 首 页 </a> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 

«/div» 


但 是 ， 如 果 您 把 按钮 链接 放置 在 <h1> 元 素 之 后 ， 将 无 法 显示 右 侧 的 文本 。 要 添加 
一 个 按钮 到 头 部 标题 的 右 侧 ， 请 指定 Class 77 "ui-btn-right" : 


实例 


<div data-role="header"> 

<h1> 欢 迎 来 到 我 的 主页 </h1> 

«a href="#" data-role-"button" class="ui-btn-right"> 搜 索 </a> 
</div> 


q 头 部 可 以 包含 一 个 或 两 个 按钮 ， 而 尾部 没有 限制 。 


尾部 栏 


尾部 栏 比 头 部 栏 更 灵活 - 在 整个 页 面 中 它们 更 具 功 能 性 和 可 变性 ， 因 此 可 以 包含 尽 
可 能 多 的 按钮 : 


实例 


«div data-role="footer"> 

«a href="#" data-role="button"> 在 Facebook 上 关注 我 </a> 
<a href="#" data-role="button"> 在 Twitter 上 关注 我 </a> 
<a href="#" data-role="button"> 在 Instagram 上 关注 我 </a> 
</div> 


注意 : 尾部 的 样式 与 头 部 不 同 (没有 内 边 距 和 空间 ， 且 按钮 不 居中 ) 。 为 了 解决 这 
个 问题 ， 请 把 "ui-btn" 放置 在 尾部 的 class 上 : 


实例 


«div data-role="footer" class="ui-btn"> 
您 还 可 以 将 尾部 中 的 按钮 进行 水 平 或 垂直 组 合 : 
实例 
头 


«div data-role="footer" class="ui-btn"> 

<div data-role="controlgroup" data-type="horizontal"> 

«a href="#" data-role="button" data-icon="plus"> 在 Facebook 上 关注 我 </ 
<a href="#" data-role="button" data-icon="plus"> 在 Twitter 上 关注 我 </a 
<a href="#" data-role="button" data-icon="plus"> 在 Instagram 上 关注 我 < 
</div> 

</div> 











定位 头 部 栏 和 尾部 栏 
头 部 和 尾部 可 以 通过 三 种 方式 进行 定位 : 


e Inline - 默认 。 头 部 栏 和 尾部 栏 与 页 面 内容 内 联 。 

e Fixed - 头 部 栏 和 尾部 栏 固 定 在 页 面 的 顶部 和 底部 。 

e Fullscreen - 与 Fixed 定位 模式 基本 相同 ， ee 
和 底部 。 但 是 当 他 工具 栏 滚动 出 屏幕 之 外 时 ， 不 会 自动 重新 显示 ， 除 非 点 
幕 ， 这 对 于 图 片 或 视频 类 有 提升 代入 感 的 应 用 是 非常 有 用 的 。 注 意 这 BAT 
工具 栏 会 遮 住 页 面 内 容 ， 所 以 最 好 用 在 比较 特殊 的 场合 下 。 


使 用 data-position 属性 来 定位 头 部 栏 和 尾部 栏 : 
Inline 定位 (默认 ) 


«div data-role-"header" data-position="inline"></div> 
«div data-role-"footer" data-position="inline"></div> 


Fixed 定位 


«div data-role="header" data-position="fixed"></div> 
«div data-role="footer" data-position="fixed"></div> 


要 启用 全 屏 定位 ， 请 使 用 data-position="fixed"， 并 添加 data-fullscreen 属性 到 元 
素 : 


Fullscreen 定位 


«div data-role="header" data-position="fixed" data-fullscreen="true 
«div data-role-"footer" data-position="fixed" data-fullscreen="true 


E | 
提示 : 全 屏 定位 适用 于 照片 、 图 像 和 视频 。 
提示 : 固定 定位 和 全 屏 定 位 中 ， 通 过 点 击 屏幕 笃 隐藏 和 显示 头 部 栏 和 尾部 栏 。 





jQuery Mobile 导航 栏 


jQuery Mobile 导航 栏 


导航 栏 是 由 一 组 水 平 排列 的 链接 组 成 ， 通 常 包含 在 头 部 或 尾部 内 。 
默认 情况 下 ， 导 航 栏 中 的 链接 将 自动 变 成 按钮 〈 不 需要 data-role-"button") 。 
使 用 data-role="navbar" 属性 来 定义 导航 栏 : 


实例 


<div data-role="header"> 

<div data-role="navbar"> 

<ul> 

<li><a href="#anylink"> 首 页 </a></1i> 
<li><a href="#anylink"> 页 面 二 </a></1i> 
<li><a href="#anylink"> 搜 索 </a></1i> 
«/ul» 

«/div» 

«/div» 


® 默认 情况 下 ， 按 钮 的 宽度 与 它 的 内 容 一 样 。 使 用 一 个 无 序列 表 来 平均 地 划 
分 按钮 的 宽度 : 1 个 按钮 占 100% 宽度 ，2 个 按钮 则 各 占 50% 的 宽度 ，3 MR 
钮 则 每 个 占 33,3% 的 宽度 ， 依 此 类 推 。 然 而 ， 如 果 您 在 导航 栏 中 指定 了 超过 5 
个 按钮 ， 将 会 拆 成 多 行 (查看 "更 多 实例 ") 。 


激活 按钮 
当 导 航 栏 中 的 某 个 链接 被 点 击 ， 它 将 获得 被 选中 GER) 的 外 观 。 
如 果 想 在 不 点 击 链接 时 获得 这 种 外 观 ， 请 使 用 class="ui-btn-active" : 


p? 
实例 
<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 


对 于 多 个 页 面 ， 您 可 能 想 要 每 个 按钮 的 选中 外 观 代表 当前 用 户 所 在 的 页 面 。 要 做 到 
这 一 点 ， 请 添加 "ui-state-persist" 和 "ui-btn-active" 到 链接 的 class : 


实例 


<li><a href="#anylink" class="ui-btn-active ui-state-persist"> 首 页 < 





BÍ 


更 多 实例 

内 容 中 的 导航 栏 如 何在 data-role="content" 内 添加 导航 栏 。 
尾部 中 的 导航 栏 如 何在 尾部 内 添加 导航 栏 。 
导航 栏 中 的 定位 图 标 如 何在 尾部 内 的 导航 栏 中 定位 图 标 。 
超过 5 个 按钮 导航 栏 中 10 个 按钮 的 演示 。 
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可 折 受 内 容 块 


可 折 党 块 允 许 您 隐藏 或 显示 内 容 - 对 于 存储 部 分 信息 很 有 用 。 


如 需 创 建 一 个 可 折 和 过 的 内 容 块 ， 需 要 为 容器 添加 data-role="collapsible" 属性 。 在 
容器 (div) 内 ， 添 加 一 个 标题 元 素 (H1-H6) ， 后 跟 您 想 要 进行 扩展 的 HTML 标 
163 


实例 


«div data-role="collapsible"> 
<h1> 点 击 我 - RIAH Æ !</h1> 
<p> 我 是 可 折 受 的 内 容 。</p> 
</div> 


默认 情况 下 ， 内 容 是 被 折 生 起 来 的 。 如 需 在 页 面 加 载 时 展开 内 容 ， 请 使 用 data- 
collapsed-"false" : 


实例 


«div data-role-"collapsible" data-collapsed="false"> 
<h1> 点 击 我 - RAAH Æ !</h1> 

<p>I'm 现在 我 默认 是 展开 的 。</p> 

</div> 


BER RT HT de tk 
TA ARRET EL IC REN : 


实例 


«div data-role="collapsible"> 
<h1> 点 击 我 - RAAH Æ !</h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

<div data-role="collapsible"> 
<h1> 点 击 我 - KERB A ! </h1> 
<P RERBA E RRRA AAS. </p> 
</div> 

</div> 


q A & PIA RI EARS TOP] et TS ARRE. 


可 折 得 集合 


可 折 受 集合 是 将 可 折 党 块 组 合 在 一 起 (就 像 手 风琴 一 样 ) 。 当 一 个 新 的 块 被 展开 
时 ， 所 有 其 他 的 块 都 会 被 折 县 起 来 。 


创建 若干 个 可 折 生 的 内 容 块 ， 然 后 把 可 折 秋 内 容 块 用 带 有 data-role="collapsible- 
set" 的 新 容器 包围 起 来 : 


实例 


«div data-role="collapsible-set"> 
«div data-role="collapsible"> 
<h1> 点 击 我 - RIAH E 1 </h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

</div> 

<div data-role="collapsible"> 
<h1> 点 击 我 - RIAH E !</h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

</div> 

</div> 


更 多 实例 


通过 data-inset 属性 取消 圆 角 nfi nri & s EB fs. 
通过 data-mini E EXE IE aS SEE RI E HEREIN, 


通过 data-collapsed-icon 和 data-expanded-icon 改变 图 标 MAKE AHA 38 B 
js 《默认 是 + 和 -) 。 


jQuery Mobile 网 格 


jQuery Mobile 布局 网 格 
jQuery Mobile 提供 了 一 套 基于 CSS 的 分 列 布局 。 然 而 ， 在 移动 设备 上 ， 由 于 考虑 
手机 的 屏幕 宽度 狭窄 ， 一 般 不 建议 使 用 分 栏 分 列 布局 。 


但 有 时 您 想 要 将 较 小 的 元 素 〈 如 按钮 或 导航 标签 ) 并 排 地 排列 在 一 起 ， 就 像 是 在 一 
个 表格 中 一 样 。 这 种 情况 下 ， 推 荐 使 用 分 列 布局 。 


网 格 中 的 列 是 等 宽 的 (合计 是 100%) , RAMEE BR. margin 或 padding. 
这 里 有 四 种 布局 网 格 可 供 使 用 : 


网 格 类 列 列 宽 对 应 实例 
ui-grid-a 2 50% / 50% ui-block-a|b 
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c 
ui-grid-c 4 25% / 25% | 25% | 25% ui-block-a|b|c|d 
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 


@ 在 列 容器 内 ， 子 元 素 拥 有 的 class 为 ui-block-a|b|c|dle 取决 于 列 数 。 列 会 
浮动 并 排 。 


实例 1:class 为 ui-grid-a (两 列 布局 ) ， 您 必须 指定 ui-block-a 和 ui-block-b 的 
两 个 子 元 素 。 


实例 2:class 为 ui-grid-b (三 列 布局 ) ， 则 必须 添加 ui-block-a、ui-block-b 和 
ui-block-c 的 三 个 子 元 素 。 


自 定 义 网 格 
通过 使 用 CSS， 您 可 以 自 定义 列 块 : 


实例 


«style» 

.ui-block-a, 
.ui-block-b, 

.ui-block-c 

1 

background-color: lightgray; 
border: 1px solid black; 
height: 100px; 
font-weight: bold; 
text-align: center; 
padding: 30px; 

} 

</style> 


您 也 可 以 通过 使 用 内 启 样 式 来 自 定义 块 : 


«div class-"ui-block-a" style="border: 1px solid black;"»«span»Tex! 


i ec" NUR ctus 





多 行 
在 列 中 也 可 以 有 多 个 行 。 


注意 : ui-block-a-class 总 是 创建 一 个 新 行 : 
实例 
头 


«div class="ui-grid-b"> 

«div class="ui-block-a"><span>Some Text</span></div> 
<div class="ui-block-b"><span>Some Text</span></div> 
<div class="ui-block-c"><span>Some Text</span></div> 
«div class="ui-block-a"><span>Some Text</span></div> 
«div class="ui-block-b"><span>Some Text</span></div> 
<div class="ui-block-a"><span>Some Text</span></div> 
</div> 


jQuery Mobile 列表 视图 


Calvin 


jQuery Mobile 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 ; 有 序 (<ol>) 和 无 序 (<ul>). 
列表 视图 是 jQuery Mobile 中 功能 强大 的 一 个 特性 。 它 会 使 标准 的 无 序 或 有 序列 表 应 


用 更 广泛 。 应 用 方法 就 是 在 ul 或 ol 标签 中 添加 data-role="listview" 属 性 。 在 每 个 项 目 
(<li>) 中 添加 链接 ， 用 户 可 以 点 击 它 : 


实例 


«ol data-role="listview"> 

<li><a href="#"> 列 表 项 m</a></1i> 
«/ol» 
«ul data-role="listview"> 

<li><a href="#"> 列 表 项 </a></1i> 
«/ul» 


列表 样式 的 圆 角 和 边缘 ， 使 用 data-inset="true" 属性 设置 : 
实例 


«ul data-role-"listview" data-inset="true"> 


? 默认 情况 下 ， 列 表 项 的 链接 会 自动 变 成 一 个 按钮 (不 需要 data- 
role="button")。 | 


列表 分 隔 
列表 项 也 可 以 转化 为 列表 分 割 项 ， 用 来 组 织 列表 ， 使 列表 项 成 组 。 
指定 列表 分 割 ， 给 列表 项 <li> 元 素 添加 data-role="list-divider" 属性 即 可 : 


实例 


«ul data-role="listview"> 

«li data-role="1list-divider"> 欧 洲 </1i> 
<li><a href="#"> 法 国 </a></1i> 
<li><a href="#"> 德 国 </a></1i> 

«/ul» 


如 果 你 有 一 个 字母 顺序 排列 的 列表 ， (例如 一 个 电话 簿 ) 通过 <ol> 或 者 <ul> 元 素 
的 data-autodividers-"true" 属性 设置 可 以 配置 为 自动 生成 的 项 目的 分 隔 : 


实例 


«ul data-role="listview" data-autodividers="true"> 
<li><a href="#">Adele</a></1i> 
<li><a href="#">Agnes</a></1i> 
<li><a href="#">Billy</a></1li> 
<li><a href="#">Calvin</a></1li> 


</ul> 


@ data-autodividers="true" 可 以 配置 为 自动 生成 的 项 目的 分 隔 。 默 认 情 况 
下 ， 创 建 的 分 隔 文本 是 列表 项 文本 的 第 一 个 大 写字 母 。 


搜索 过 滤 


jquery Mobile 提 供 一 个 非常 简单 的 方法 ， 实 现 客户 端 搜 索 功 能 ， 算 选 列表 的 选项 。 
只 需 添 加 data-filter="true" 属性 即 可 : 


实例 


«ul data-role="listview" data-filter="true"></ul> 


默认 情况 下 ， 搜 索 输 入 框 默 认 的 字符 为 "Filter items..." 


通过 设置 mobileinit 事 件 的 绑 定 程序 或 者 给 
$.mobile.listview.prototype.options.filterPlaceholder 选项 设置 一 个 字符 串 ， 或 者 给 
列表 设置 data-filter-placeholder 属性 ， 可 以 设置 搜索 输入 框 的 默认 字符 : 


实例 


«ul data-role="listview" data-filter="true" data-filter-placeholdei 
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更 多 实例 


只 读 列表 如 何 创建 一 个 不 带 链接 的 列表 (不 会 是 个 按钮 且 不 可 点 击 )。 


jQuery Mobile 列表 内 容 


浏览 器 


Google Chrome 
Google Chrome 是 免费 的 开源 web 浏览 器 。 发 布 于 2008 年 。 


Mozilla Firefox 


Firefox 是 来 自 Mozilla 的 web 浏览 器 。 发 布 于 2004 年 。 





jQuery Mobile 列表 缩 略 图 


大 于 16x16px 的 图 像 ， 请 在 链接 中 添加 <img> 元 素 。 
jQuery Mobile 将 自动 缩放 图 像 到 80x80px: 


实例 


«ul data-role="listview"> 
<li><a href="#"><img src="chrome.png"></a></1li> 
</ul> 


使 用 标准 的 HTML 添 加 列表 信息 : 
实例 


«ul data-role="listview"> 
<li> 
<a href="#"> 
<img src="chrome.png"> 
<h2>Google Chrome</h2> 
<p>Google Chrome 免费 的 开源 web 浏览 器 。 发 布 于 2008 f£, </p> 
</a> 
</li> 
</ul> 


jQuery Mobile 列表 图 标 
在 列表 <img> 元 素 使 用 class-"ui-li-icon" 添加 16x16px 图 标 : 
实例 


<li><a href="#"><img src="us.png" alt="USA" class="ui-1i-icon">USA< 
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分 割 按钮 


在 JQuery Mobile 的 列表 中 ， 有 时 需要 对 选项 内 容 做 两 个 不 同 的 操作 ， 这 时 ， 需 要 
对 选项 中 的 链接 按钮 进行 分 割 。 实 现 分 割 的 方法 是 在 <li> 元 素 中 再 增加 一 个 <a> 元 
素 ， 便 可 以 在 页 面 实现 分 割 效果 。 

jQuery Mobile 会 自动 设置 第 二 个 链接 为 蓝 色 箭 头 的 图 标 ， 图 标的 链接 文字 GOR 
有 的 话 ) RH FI PRs BEE 图 标 时 显示 : 


实例 


«ul data-role="listview"> 
<li> 
<a href="#"><img src="chrome.png"></a> 
<a href="#">Some Text</a> 
</li> 
</ul> 


添加 一 些 页 面 和 对 话 框 使 链接 功能 更 加 丰富 : 


实例 


«ul data-role="listview"> 
<li> 
<a href="#"><img src="chrome.png"></a> 
«a href="#download" data-rel="dialog"> FAX, 28«/a» 
</li> 
</ul> 


气泡 数字 


气泡 数字 是 用 来 显示 列表 项 相关 的 数字 ， 如 在 一 个 邮箱 的 邮件 : 


如 需 添加 气泡 数字 ， 请 使 用 行内 元 素 ， 比 如 <span>， 设 置 class "ui-li-count" 属性 
并 添加 数字 : 


实例 


«ul data-role="listview"> 
<li><a href="#"> 收 件 箱 <span class-"ui-li-count"»25«/span»«/a»«/li: 
<li><a href="#"> 发 件 箱 <span class="ui-li-count">432</span></a></1: 
<li><a href="#"> 垃 圾 箱 <span class="ui-li-count">7</span></a></li> 
«/ul» 





注意 : 显示 一 个 正确 的 气泡 数字 ， 必 须 修改 编程 方式 。 这 将 在 以 后 的 章节 解释 。 


更 多 实例 

改变 列表 项 的 默认 链接 国标 如 何 设置 列表 项 的 默认 链接 图 标 (默认 是 右 箭头 ) 
可 折 章 的 列表 如 何 创建 显示 /隐藏 的 列表 。 

更 多 内 容 格式 如 何 制 作 一 个 日 历 。 


jQuery Mobile 表单 


jQuery Mobile 会 自动 为 HTML 表单 自动 添加 样式 ， 让 它们 看 起 来 更 具 吸 引力 ， 触 
摸 起 来 更 具 友 好 性 。 


jQuery Mobile 表单 


今天 的 日 期 : 年 /月 /日 
选择 喜爱 的 颜色 : 红色 


切换 开关 ， ot 
选择 喜欢 的 电影 : 


Dni X 
变形 金刚 


碟 中 谍 


jQuery Mobile 表单 结构 


jQuery Mobile 使 用 CSS 为 HTML 表单 元 素 添 加 样式 ， 让 它们 更 具 吸 引力 ， 更 易于 
使 


ft jQuery Mobile 中 ， 您 可 以 使 用 下 列表 单 控件 : 


e 文本 输入 框 
。 搜索 输入 框 
e 单 选 按钮 
。 复 选 框 
e 选择 菜单 
e 滑动 条 


翻转 拨 动 开关 
当 使 用 jQuery Mobile 表单 时 ， 您 应 当知 道 : 


e «form» 元 素 必 须 有 一 个 method 和 一 个 action 属性 

e 每 个 表单 元 素 必 须 有 一 个 唯一 的 "id" 属性 。id 必须 是 整个 站 点 所 有 页 面 上 唯一 
的 。 这 是 因为 jQuery Mobile 的 单 页 导航 机 制 使 得 多 个 不 同 页 面 在 同一 时 间 被 
呈现 


。 每 个 表单 元 素 必须 有 一 个 标签 。 设 置 标签 的 for 属性 来 匹配 元 素 的 ia 
实例 


«form method="post" action-"demoform.html"- 
«label for="fname"> 姓 名 :</label> 

<input type="text" name="fname" id="fname"> 
</form> 


如 需 隐 藏 标 签 ， 请 使 用 class ui-hidden-accessible。 这 在 您 把 元 素 的 placeholder 
属性 作为 标签 时 经 常用 到 : 


实例 


«form method="post" action-"demoform.html"- 

«label forz"fname" class="ui-hidden-accessible">t% :</label> 
<input type="text" name="fname" id="fname" placeholder="##4..."> 
</form> 


Field 容器 


如 需 让 标签 和 表单 元 素 看 起 来 更 适应 宽屏 ， 请 用 带 有 data-role="fieldcontain" 属性 
的 <div> 或 <fieldset> 元 素 包 围 label/form 元 素 : 


实例 


«form method="post" action-"demoform.html"- 
«div data-role="fieldcontain"> 

«label for="fname">##:</label> 

<input type="text" name="fname" id="fname"> 
«label forz"lname"24:«/label» 

<input type="text" name-z"lname" id-"lname"- 
«/div»» 

«/form» 


TutorialsPoint 移动 端 教程 


q fieldcontain 属性 基于 页 面 的 宽度 为 标签 和 表单 控件 添加 样式 。 当 页 面 的 宽 
EAF 480px 时 ， 它 会 自动 把 标签 放置 在 与 表单 控件 同一 线 上 。 当 页 面 的 宽度 
小 于 480px 时 ， 标 签 会 被 放置 在 表单 元 素 的 上 面 。 


提示 : 为 了 防止 jQuery Mobile 为 可 点 击 元 素 自 动 添加 样式 ， 请 使 用 data- 
role="none" 属性 : 


实例 


«label for="fname">#t% :</label> 
<input type="text" name="fname" id="fname" data-role="none"> 


E jQuery Mobile 中 的 表单 提交 


jQuery Mobile 通过 AJAX 自动 处 理 表单 提交 ， 并 将 试图 集成 服务 器 响应 到 应 用 
程序 的 DOM 中 。 


jQuery Mobile 表单 514 


jQuery Mobile 表单 输入 元 素 


jQuery Mobile 文本 输入 框 


输入 字段 是 通过 标准 的 HTML 元 素 编 码 的 ，jQuery Mobile 将 为 它们 添加 样式 使 其 
看 起 来 更 具 吸 引力 ， 在 移动 设备 上 更 易 使 用 。 您 也 能 使 用 新 的 HTML5 的 <input> 


实例 


«form method="post" action="demo_form.php"> 

<div data-role="fieldcontain"> 

«label for="fullname">#4%:</label> 

<input type="text" name="fullname" id="fullname"> 


«label forz"bday"»/tH:«/label» 
«input type="date" name="bday" id="bday"> 


<label for="email">E-mail:</label> 

«input type="email" name="email" id="email" placeholder=" 你 的 电子 邮 知 
«/div» 

«/form» 
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提示 : 请 使 用 placeholder 来 指定 一 个 简短 的 描述 ， 用 来 描述 





pi 
sp 
> 
4 
T 
cr 
e 
及 
mr 


«input placeholder="_sometext_"> 


文本 域 


对 于 多 行文 本 输入 可 使 用 <textarea> 。 
注意 : 当 您 键入 一 些 文本 时 ， 文 本 域 会 自动 调整 大 小 以 适应 新 增加 的 行 。 


实例 


«form method="post" action="demo_form.php"> 
«div data-role="fieldcontain"> 

«label for="info"> 附 加 信息 :</label> 

<textarea name="addinfo" id="info"></textarea> 
</div> 

</form> 


搜索 输入 框 


type="search" 类 型 的 输入 框 是 在 HTML5 中 新 增 的 ， 它 是 为 输入 搜索 定义 文本 字 


B 
实例 


«form method="post" action="demo_form.php"> 
<div data-role="fieldcontain"> 

«label for="search">#2% :</label> 

<input type="Search" name="Search" id="Search"> 
</div> 


</form> 
单 选 按钮 
当 用 户 在 有 限 数量 的 选择 中 仅 选 取 一 个 选项 时 ， 使 用 单 选 按钮 。 
为 了 创建 一 系列 单 选 按钮 ， 请 添加 带 有 type="radio" 的 input 以 及 相应 的 label, 


单 选 按钮 包围 在 <fieldset> AL 您 也 可 以 添加 一 个 «legend» 元 素来 定义 
<fieldset> 的 标题 。 


提示 : 请 使 用 data-role="controlgroup" 来 把 按钮 组 合 在 一 起 : 
实例 


«form method="post" action="demo_form.php"> 

<fieldset data-role="controlgroup"> 

<legend>Choose your gender :</legend> 

<label for="male">Male</label> 

<input type="radio" name="gender" id="male" value="male"> 
<label for="female">Female</label> 

<input type="radio" name="gender" id="female" value="female"> 
</fieldset> 

</form> 


把 


复 选 框 


当 用 户 在 有 限 数量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 使 用 复 选 框 
实例 


«form method="post" action="demo_form.php"> 

<fieldset data-role="controlgroup"> 

<legend>Choose as many favorite colors as you'd like:</legend> 
«label for="red">Red</label> 

<input type="checkbox" name="favcolor" id="red" value="red"> 
«label for="green">Green</label> 

<input type="checkbox" name="favcolor" id="green" value="green"> 
<label for="blue">Blue</label> 

<input type="checkbox" name="favcolor" id="blue" value="blue"> 
</fieldset> 

</form> 


更 多 实例 


如 需 水 平 组 合 单 选 按钮 或 复 选 框 ， 请 使 用 data-type-"horizontal" : 
实例 


«fieldset data-role="controlgroup" data-type="horizontal"> 
您 也 可 以 用 一 个 field 容器 包围 <fieldset> : 
"p? 
实例 


«div data-role="fieldcontain"> 
«fieldset data-role="controlgroup"> 
<legend> 请 选择 您 的 性 别 :</legend> 
</fieldset> 

</div> 


如 果 您 想 要 您 的 按钮 中 的 一 个 预先 选中 ， 请 使 用 HTML 中 <input> 的 checked 属 
性 : 


实例 


<input type="radio" checked» 
<input type="checkbox" checked> 


TutorialsPoint 移动 端 教程 


jQuery Mobile 表单 选择 菜单 


jQuery Mobile 选择 菜单 


Iphone 上 的 选择 菜单 : Android/SGS4 设备 上 的 选择 菜单 : 


Monday 
Tuesday 
Wednesday 
Thursday 


Friday 
X Monday 


Tuesday 


Saturday 


Sunday 


Wednesday 
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«select» 元 素 创建 带 有 若干 选项 的 下 拉 列 表 。 
«select» 元 素 内 的 «option» 元 素 定义 了 列表 中 的 可 用 选项 : 


实例 


jQuery Mobile 表单 选择 菜单 





«form method="post" action-"demoform.html"- 
«fieldset data-role="fieldcontain"> 

«label for="day">Select Day</label> 

«select name="day" id="day"> 

<option value="mon">Monday</option> 

<option value="tue">Tuesday</option> 
<option value="wed">wednesday</option> 
</select> 

</fieldset> 

</form> 


提示 : 如 果 您 有 一 个 带 有 相关 选项 的 很 长 的 列表 ， 请 在 «select» 内 使 用 
<optgroup> 元 素 : 


实例 


«select name="day" id="day"> 
<optgroup label="Weekdays"> 

<option value="mon">Monday</option> 
<option value="tue">Tuesday</option> 
<option value="wed">wednesday</option> 
</optgroup> 

<optgroup label="Weekends"> 

<option value="sat">Saturday</option> 
<option value="sun">Sunday</option> 
</optgroup> 

</select> 
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本 页 顶部 的 图 像 ， 演 示 了 移动 平台 上 如 何 使 用 它们 的 方式 展示 一 个 选择 菜单 。 


如 果 您 想 要 让 选择 菜单 在 所 有 的 移动 设备 上 都 显示 相同 ， 请 使 用 jQuery 自 带 的 自 
定义 选择 菜单 ，data-native-menu="false" 属性 : 


实例 


«select name="day" id="day" data-native-menu="false"> 


如 需 在 选择 菜单 中 选择 多 个 选项 ， 请 在 «select» 元 素 中 使 用 multiple 属性 : 


实例 


«select name="day" id-"day" multiple data-native-menu="false"> 


更 多 实例 

使 用 data-role="controlgroup" 如 何 组 合 一 个 或 多 个 选择 菜单 。 
使 用 data-type="horizontal" 如 何 水 平 组 合 选择 菜单 。 
预选 中 选项 如 何 预选 中 一 个 选项 。 

可 折 受 表单 nep exe. 


jQuery Mobile 表单 滑动 条 


jQuery Mobile 滑动 条 控件 


滑动 条 人 允许 您 从 一 个 范围 的 数字 中 选择 一 个 值 : 


50 50 


如 需 创 建 滑动 条 ， 请 使 用 «input type="range"> : 


例 


将 


«form method="post" action="demoform.html"> 

<div data-role="fieldcontain"> 

«label for="points">Points:</label> 

<input type="range" name="points" id="points" value="50" min="0" mé 
</div> 

</form> 


zi — = 
使 用 以 下 属性 来 规定 限制 : 


max - 规定 允许 的 最 大 值 
min - 规定 允许 的 最 小 值 
step - 规定 合法 的 数字 间隔 
value - 规定 默认 值 





tem : 如 果 您 想 要 高 完 突 出 显示 滑动 条 的 值 ， 请 添加 data-highlight="true" : 
实例 
天 

<input type="range" data-hightlight="true"> 
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波动 开关 通常 用 于 on/off 或 true/false 按钮 : 


如 需 创建 一 个 开关 ， 请 把 «select» 元 素 与 data-role="slider" 一 起 使 用 ， 并 添加 两 


个 «option? 元 素 : 
实例 


«form method="post" action="demoform.html"> 

<div data-role="fieldcontain"> 

<label for="switch">Toggle Switch:</label> 

<select name="switch" id="switch" data-role="slider"> 
«option value="on">0n</option> 

«option value="off">0ff</option> 

</select> 

</div> 

</form> 


提示 : 请 使 用 "selected" 属性 来 设置 选项 中 的 一 个 为 预选 中 状态 〈 高 亮 突 
a): 


实例 


«option value="off" selected>0ff</option> 


jQuery Mobile 主题 


jQuery Mobile 主题 


jQuery Mobile 提供 了 5 种 不 同 的 主题 样式 , 从 "a" 到 "e" - 每 一 种 主题 的 按钮 ， 工 具 
条 ， 内 容 块 等 等 颜色 都 不 一 致 ， 每 个 主题 的 视觉 效果 也 不 一 样 。 


通过 设置 元 素 的 data-theme 属 性 可 以 自 定义 应 用 的 外 观 : 


«div data-role-"page" data-theme-"a|b|c|d|e"» 


值 描述 实例 
a 默认 。 黑 色 背 景 白色 文字 
b 蓝 色 背景 白色 文字 / 黑色 文字 灰色 背景 
黑色 文字 浅 灰 色 背 景 
d 黑色 为 主 白色 背景 
e 黑色 文字 橙色 背景 


9 你 喜欢 混合 主题 ! 
默认 情况 下 ， jQuery Mobile 使 用 "a" 主题 (黑色 ) 来 设置 头 部 和 底部 "o" È 
题 (RKB) 设置 页 面 内 容 。 但 是 ， 你 可 以 自 定义 设置 你 喜欢 的 混合 主题 。 


主题 头 部 ， 内 容 和 底部 


实例 


«div data-role-"header" data-theme="b"></div> 
«div data-role="content" data-theme="a"></div> 


<div data-role="footer" data-theme="e"></div> 


主题 对 话 框 


实例 


«a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page<, 


«div data-role-"page" id="pagetwo" data-overlay-theme="e"> 
<div data-role="header" data-theme="b"></div> 
<div data-role="content" data-theme="a"></div> 
<div data-role="footer" data-theme="c"></div> 

</div> 
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主题 按钮 
实例 


«a href="#" data-role="button" data-theme="a">Button</a> 
«a href="#" data-role="button" data-theme="b">Button</a> 
<a href="#" data-role="button" data-theme="c">Button</a> 


主题 图 标 


实例 


«a href="#" data-role="button" data-icon="plus" data-theme="e">Plu: 


A 





头 部 和 底部 的 主题 按钮 


实例 


<div data-role="header"> 
<a href="#" data-role="button" data-icon="home" data-theme="b">H¢ 
«hi»Welcome To My Homepage</h1> 
«a href="#" data-role="button" data-icon="Search" data-theme="e": 
</div> 


<div data-role="footer"> 
«a href="#" data-role="button" data-theme="b" data-icon="plus">Bi 
«a href="#" data-role="button" data-theme="c" data-icon-"plus"»Bi 
«a href="#" data-role="button" data-theme="e" data-icon="plus">Bi 
</div> 
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主题 导航 条 
实例 


<div data-role="footer" data-theme="e"> 
<hi>Insert Footer Text Here</h1i> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home" data-theme="b">Button 1«/a»- 
<li><a href="#" data-icon="arrow-r">Button 2«/a»«/li» 
<li><a href="#" data-icon="arrow-r">Button 3«/a»«/li» 
<li><a href="#" data-icon="Search" data-theme="a" >Button 4<, 
</ul> 
</div> 
</div> 


Me 





主题 可 折 党 按钮 和 内 容 


实例 


«div data-role-"collapsible" data-theme="b" data-content-theme="e": 
<hi>Click me - I'm collapsible!</h1> 
<p>I'm the expanded content.</p> 

«/div» 
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主题 列表 








实例 


«ul data-role="listview" data-theme="e"> 
<li><a href="#">List Item</a></1i> 
<li data-theme="a"><a href="#">List Item</a></li> 
«li data-theme="b"><a href="#">List Item</a></li> 
<li><a href="#">List Item</a></1li> 

</ul> 


主题 分 割 按钮 


实例 


«ul data-role="listview" data-split-theme="e"> 


EMH BHR 


实例 


«div data-role-"collapsible" data-theme="b" data-content-theme="e"> 
«ul data-role="listview"> 
<li><a href="#">Agnes</a></1i> 
</ul> 
</div> 


了 — OH 


主题 表单 





实例 


«label for="name">Full Name:</label> 
<input type="text" name="text" id="name" data-theme="a"> 


«label for="colors">Choose Favorite Color:</label> 
<select id="colors" name="colors" data-theme="b"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
</select> 


EAA HT ex 


实例 


«fieldset data-role="collapsible" data-theme="b" data-content-them: 
<legend>Click me - I'm collapsible!</legend> 
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添加 新 主题 


jQuery Mobile 可 以 在 移动 页 面 添加 新 主题 。 


通过 修改 CSS 文件 来 添加 或 编辑 新 主题 (如 果 你 已 经 下 载 了 jQuery Mobile)。 你 只 
需要 拷贝 样式 模块 ， 然 后 重 命令 字母 类 名 (f-z) ,并 在 样式 中 添加 你 喜欢 的 颜色 和 字 
体 。 


你 也 可 以 在 HTML 文档 中 添加 主题 的 新 样式 - 工具 条 添加 类 : ui-bar-(a-z) ， 文 本 
内 容 添 加 类 : ui-body-(a-z) for the content: 


实例 


«style» 

.ui-bar-f 

{ 

color:green; 
background-color: yellow; 


.ui-body-f 

{ 
font-weight:bold; 
color:purple; 

} 

</style> 


jQuery Mobile 事件 


事件 = 所 有 不 同 访问 者 访问 页 面 的 响应 动作 。 


jQuery Mobile 事件 


在 jQuery Mobile 你 可 以 使 用 任何 标准 的 jQuery 事件 。 
除 此 之 外 , jQuery Mobile 也 提供 了 针对 移动 端 浏览 器 的 事件 : 
e 触摸 事件 - 当 用 户 触摸 屏幕 时 触发 
e 滑动 事件 - 当 用 户 上 下 滑动 时 触发 
e 定位 事件 - 当 设 各 水 平 或 垂直 翻转 时 触发 
e 页 面 事 件 - 当 页 面 显 示 ， 人 隐藏 ， 创 建 ， 加 载 或 未 加 载 时 触发 


初始 化 jQuery Mobile 事件 


在 学 习 jQuery 时 我 们 学 到 了 用 $(document).ready() 来 使 你 的 jQuery 代码 脚本 在 DOM 
元 素 加 载 完 成 后 才 开 始 执 行 : 


jQuery document ready 事件 
<script> 
$(document).ready(function(){ 
_// jQuery methods go here... 
D 


«/script» 


但 是 ， 在 jQuery Mobile 中 , 使 用 pageinit 事件 来 设置 代码 脚本 在 DOM 元 素 加 载 完 成 
pom 所 以 要 在 任何 新 页 面 加 载 并 创建 是 执行 脚本 ， 就 需要 绑 定 pageinit 事 


第 二 个 参数 ("#pageone") 为 指定 事件 的 页 面 id : 


jQuery Mobile pageinit 事件 


«script» 
$(document).on("pageinit", "#pageone", function(){ 


_// jQuery events go here..._ 


3); 


«/script» 


@ 注意 : jQuery on() 方法 用 于 绑 定 事件 到 选中 的 元 素 上 。 
下 一 章节 我 们 将 更 详细 介绍 jQuery Mobile 事件 。 


jQuery Mobile 触摸 事件 


触摸 事件 在 用 户 触摸 屏幕 (页面) 时 触发 。 


点 击 或 者 滑动 本 区 域 





q 触摸 事件 同样 可 应 用 与 桌面 电脑 上 : 点 击 或 者 滑动 鼠标 ! 


jQuery Mobile 点 击 
点 击 事件 在 用 户 点 击 元 素 时 触发 。 
如 下 实例 : 当 点 击 «p» 元 素 时 ， 人 隐藏 当 前 的 <p> 元 素 : 


实例 


$("p").on("tap",function(){ 
$(this).hide(); 


jQuery Mobile 点 击 不 放 (KH) 
点 击 不 放 (长 按 ) 事件 在 点 击 并 不 放 (大 约 一 秒 ) 后 触发 


实例 


$("p").on("taphold",function()1 
$(this).hide(); 


jQuery Mobile 滑动 
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时 触发 的 事件 : 


实例 


$("p").on("swipe", function(){ 
$("span").text("Swipe detected!"); 


, 


jQuery Mobile 向 左 滑动 
向 左 滑动 事件 在 用 户 向 左 拖 动 元 素 大 于 30px 时 触发 : 


实例 


$("p").on("swipeleft",function()( 
alert("You swiped left!"); 
3); 


jQuery Mobile 向 右 滑动 
向 右 滑动 事件 在 用 户 向 右 拖 动 元 素 大 于 30px 时 触发 : 


实例 


$("p").on("swiperight",function()( 
alert("You swiped right!"); 
3); 


jQuery Mobile 滚屏 事件 
jQuery Mobile 提供 了 两 种 滚屏 事件 : 滚屏 开始 时 触发 和 滚动 结束 时 触发 。 


jQuery Mobile 滚屏 开始 (Scrollstart) 
scrollstart 事件 是 在 用 户 开始 滚动 页 面 时 触发 : 


实例 


$(document).on("scrollstart",function(){ 
alert("Started scrolling!"); 
}); 


q HX : OS 设备 在 滚屏 时 锁定 DOM 操作 ， 这 意味 着 当 用 户 滚屏 时 不 可 能 
改变 任何 东西 。 然 而 ，jQuery 团队 正在 为 此 寻找 解决 方案 。 


jQuery Mobile 滚屏 结束 (Scrollstop) 


scrollstop 事件 是 在 用 户 停止 滚动 页 面 时 触发 : 
实例 


$(document).on("scrollstop",function(){ 
alert("Stopped scrolling!"); 
}); 


jQuery Mobile 方向 改变 事件 


jQuery Mobile 方向 改变 (orientationchange) 事件 


当 用 户 垂直 或 水 平 旋转 移动 设备 时 ， 鲁 发 方向 改变 (orientationchange) 事件 。 
水 平 旋转 垂直 旋转 





| 
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如 需 使 用 方向 改变 (orientationchange) 事件 ， 请 附加 它 到 window x12& : 


$(window) .on("orientationchange", function(){ 
alert("The orientation has changed!"); 


3); 


[E] Eq RI — 23, event 对 象 ， 返 回 移动 设 各 的 方向 : "纵向 " (设备 保持 在 
垂直 位 置 ) "aA" (设备 保持 在 水 平 位 置 ) 


实例 


$(window) .on("orientationchange", function(event ) { 
alert("Orientation is: " + event.orientation); 


3): 


由 于 方向 改变 (orientationchange) 事件 绑 定 到 window 对 象 ， 我 们 可 以 使 用 
window.orientation 属性 来 设置 不 同 的 样式 ， 以 便 区 分 纵向 和 横向 的 视图 : 


实例 


$(window) .on("orientationchange", function(){ 
if(window.orientation == 0) // Portrait 


$("p").css({"background-color": "yellow", "font-size": "300%"}); 
else // Landscape 
$("p").css({"background-color": "pink", "font-size":"200%"}); 


3); 


@ window.orientation 属性 针对 纵向 视图 返回 0， 针 对 横向 视图 返回 90 或 
-90。 


jQuery Mobile Data 属性 


jQuery Data 属性 
jQuery Mobile 使 用 HTML5 data-* 属性 来 为 移动 设 各 创建 更 具 触 摸 友 好 性 和 吸引 性 


的 外 观 。 


在 下 面 的 参考 列表 中 ， 粗 体 显示 的 值 为 默认 值 。 


按钮 


带 有 data-role="button" 的 超 链接 。button 元 素 、 工 具 栏 中 的 链接 以 及 input 字段 都 
会 自动 泻 染 成 按钮 样式 ， 不 需要 添加 data-role="button"。 


Data- 属 性 


data-corners 


data-icon 


data-iconpos 


data- 
iconshadow 


data-inline 
data-mini 


data-shadow 


data-theme 


值 


true | false 
Icons 参考 手册 


left | right | top | bottom | 
notext 


true | false 
true | false 
true | false 


true | false 


letter (a-z) 


描述 
按钮 是 否 圆 角 
按钮 的 图 表 。 默 认 没 有 


按钮 是 否 有 阴影 


按钮 的 主题 颜色 


9 如 需 组 合 多 个 按钮 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 
type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 按钮 。 


复 选 框 


带 有 type="checkbox" 的 成 双 成 对 的 label 和 input。 它 们 会 被 自动 泻 染 程 按 钮 样 
式 ，data-role 不 是 必需 的 。 


Pag 


Data- 属 性 值 描述 
data-mini true | false 规定 复 选 框 是 小 尺寸 还 是 常规 尺寸 
data-role none 防止 jQuery Mobile 把 复 选 框 泻 染 成 按钮 样式 
data-theme letter (a-z) 规定 复 选 框 的 主题 颜色 


Q 如 需 组 合 多 个 复 选 框 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 
type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 复 选 框 。 


"n d E 


在 带 有 data-role="collapsible" 的 容器 内 部 的 后 跟 任意 HTML 标记 的 标题 元 素 。 


Data- 属 性 值 描述 
data- true | false 规定 内 容 是 折 有 登 还 是 展开 
collapsed 
data- 
collapsed- Icons 参考 手册 规定 可 折 等 按钮 的 图 标 。 默 认 是 "plus" 
icon 


data-content- 规定 可 折 受 内 容 的 主题 颜色 。 是 否 为 可 折 


letter (a-z) 


theme $ AAR E 角 
data- zz Adbighügmi. Bh 
expanded- Icons 参考 手册 mo DU ESOS mh 
icon ie 

a left | right | top | c gn inei 
data-iconpos bottom 规定 图 标的 位 置 

= ak lus EA ASS ee 页 mL i 

data-inset true | false "M ARE FS EG Ob 
data-mini true | false 规定 可 折 等 按钮 是 小 尺寸 还 是 常规 尺寸 
data-theme letter (a-z) 规定 可 折 受 按钮 的 主题 颜色 


可 折 得 集合 


在 带 有 data-role="collapsible-set" HA RARBN AH ANA. 


学 


Data- 属 性 值 Tx 


data- aes aibhne BP: 8 
collapsed- Icons 参考 手册 a 默认 是 
icon P 

data- 

content- letter (a-z) 规定 可 折 生 按钮 的 主题 颜色 
theme 

规定 当 内 容 展开 时 可 折 咎 按钮 的 图 
expanded- Icons 参考 手册 ye, Bs) = "minus" 

icon bs 


left | right | top | 


几 定 图 标的 位 置 
bottom | notext 规定 图 标的 位 置 


data-iconpos 


MED & REG SAM A A H MH 


data-inset true | false 动 距 
= they E +37 Beton 
data-mini true | false DEUM UE 
data-theme letter (a-z) 规定 可 折 各 集合 的 主题 颜色 
DA 
内 容 


带 有 data-role="content" 的 容器 。 


Data- 属 性 值 描述 
data-theme letter (a-z) 规定 内 容 的 主题 颜色 。 默 认 是 "c 
控件 组 


带 有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器 。 组 合 单 个 类 型 (基于 
链接 的 按钮 、 单 选 按钮 、 复 选 框 、select 元 素 ) 的 多 个 按钮 样式 的 input。 对 于 组 合 
表单 复 选 框 和 单 选 按钮 ， 推 荐 在 带 有 data-role="fieldcontain" 的 «div» 内 使 用 
<fieldset> 容器 来 改进 标签 样式 。 


Data- 属 性 值 描述 
data-mini true | false 规定 控件 组 是 小 尺寸 还 是 常规 尺寸 
data-type horizontal | vertical 规定 控件 组 是 水 平 显 示 还 是 垂直 显示 


对 话 框 


带 有 data-role-"dialog" 的 容器 或 带 有 data-rel-"dialog" 的 链接 。 


data- 
close- sometext ”规定 对 话 框 关闭 按钮 的 文本 
btn-text 
data- 本 本 规定 是 否 清除 各 个 页 面 的 jQuery DOM 缓存 (如 果 设 
dom- 置 为 true， 您 必须 自己 管理 DOM 并 在 所 有 移动 设备 上 
cache 进行 测试 ) 
data- 
overlay- P 人， 规定 对 话 框 页 面 的 蒙 版 (背景 ) ane 
theme 
shia ; id (a- — 规定 对 话 框 页 面 的 主题 颜色 
data- Qu y4 框 页 的 标题 
title sometext . 规定 对 话 框 页面 的 标题 
增强 
带 有 data-enhance="false" 或 data-ajax="false" 的 容器 。 
a true ”如 果 设 置 为 "true"” (SA) , jQuery Mobile 会 自动 泻 染 页 
GN SE | 面 ， 使 其 更 适合 于 移动 设备 。 如 果 设 置 为 "false"， 框 架 将 
false 会 泻 染 页 面 
true 
e | 规定 是 否 通过 ajax MATH 


false 


注意 : data-enhance="false" 必须 与 $.mobile.ignoreContentEnabled=true" 一 同 使 
用 来 阻止 jQuery Mobile 自动 泻 染 页 面 。 


当 $.mobile.ignoreContentEnabled 设置 为 true 时 ，data-ajax="false" 容器 内 的 任 
何 链接 或 表单 元 素 将 会 被 框架 的 导航 功能 忽略 。 


包围 在 label/ 表 单元 素 对 周围 的 带 有 data-role="fieldcontain" 的 容器 。 


固定 工具 栏 


带 有 data-role="header" 或 data-role="footer"， 并 带 有 data-position="fixed" 属性 


的 容器 。 


data- 
disable- 
page- 
Zoom 


data- 
fullscreen 


data-tap- 
toggle 


data- 
transition 


data- 
update- 
page- 
padding 


data- 
visible- 
on-page- 
Show 


翻转 拨 动 开 天 


一 个 带 有 data-role-"slider" 的 «select» 元 素 和 两 个 «option» 元 素 。 


规定 工具 栏 是 否 一 直 固 定 在 顶部 或 底部 


规定 用 户 是 否 能 够 通过 点 击 改变 工具 栏 的 可 见 性 


规定 当 点 击发 生 时 的 切换 效果 


规定 页 面 顶部 和 底部 的 内 边 距 是 否 在 resize、transition 和 
"updatelayout" 事件 发 生 时 更 新 (jQuery Mobile 在 
"pageshow" 事件 发 生 时 总 是 更 新 内 边 距 ) 


规定 当 父 页 面 显示 时 工具 栏 的 可 见 性 


Data- 属 性 值 描述 
data-mini m 规定 开关 是 小 尺寸 还 是 常规 尺寸 
ae se spe rim s 
EE OUS He jQuery Mobile 把 拨 动 开 关 泻 染 成 按钮 样 
data-theme letter (a-z) 规定 找 动 开 关 的 主题 颜色 
data-track- 


oo by MH an 
theme letter (a-z) ”规定 轨道 的 主题 颜色 


尾部 栏 


#4 data-role="footer" 的 容器 。 


Data- 属 性 值 描述 

data-id sometext 规定 唯一 ID。 对 于 持续 的 尾部 栏 是 必需 的 

data- inline | ri ES npa ES zu 三 | = ir 
position fixed 规定 尾部 栏 是 与 页 面 内 容 内 联 还 是 保持 固定 在 底部 
data- true | 规定 尾部 栏 是 固定 在 底部 还 是 履 盖 在 页 面 内 容 上 
fullscreen false (查看 范围 更 大 ) 

home a) ， 规 定 尾部 栏 的 主题 颜色 。 默 认 是 on 


注意 : 如 需 馈 用 全 屏 定 位 ， 请 使 用 data-position="fixed"， 然 后 添加 data-fullscreen 
属性 到 元 素 上 。 


头 部 栏 


带 有 data-role="header" 的 容器 。 


Data- 属 性 值 描述 

data-id sometext ”规定 唯一 ID。 对 于 持续 的 头 部 栏 是 必需 的 
um mune] 规定 头 部 栏 是 与 页 面 内 容 内 联 还 是 保持 固定 在 项 部 
data- true | 规定 头 部 栏 是 固定 在 顶部 还 是 覆盖 在 页 面 内 容 上 
fullscreen false (查看 范围 更 大 ) 

data- letter (a- 


m ve Lx 兰 的 主题 新 SUME E3 na" 


注意 : 如 需 和 启用 全 屏 定 位 ， 请 使 用 data-position="fixed"， 然 后 添加 data-fullscreen 
属性 到 元 素 上 。 


链接 


所 有 的 链接 ， 包 含 那 些 带 有 data-role="button" 的 链接 和 表单 提交 按钮 。 


Data- 属 
性 


data- 
ajax 


data- 
direction 


data- 
dom- 
cache 


data- 
prefetch 


data-rel 


data- 
transition 


data- 
position- 
to 


列表 


值 


true | false 


reverse 


true | false 


true | false 


back | dialog | 
external | popup 


fade | flip | flow | 
pop | slide | 
slidedown | 
slidefade | 
slideup | turn | 
none 


origin | jQuery 
selector | 
window 


描述 


规定 是 否 通过 ajax 加 载 页 面 来 提高 用 户 体验 和 
交互 。 如 果 设 置 为 false，jQuery Mobile 将 会 
执行 一 个 正常 的 页 面 请 求 。 


反 向 转换 动画 〈 仅 用 于 页 面 和 对 话 框 ) 


规定 是 否 清 除 各 个 页 面 的 jQuery DOM 缓存 
(如 果 设 置 为 true， 您 必须 自己 管理 DOM 并 
在 所 有 移动 设备 上 进行 测试 ) 


规定 是 否 预 先 读 取 页 面 到 DOM 中 ， 以 便当 用 
户 访问 它们 时 可 用 

规定 链接 行为 的 选项 。Back - 回 退 到 历史 记录 
中 的 前 一 个 页 面 。Dialog - 以 对 话 框 形式 打开 
链接 ， 不 保存 到 历史 记录 中 。External - 用 于 
链接 到 另 一 个 域 。Popup - 打开 一 个 弹出 窗 
回 。 


规定 一 个 页 面 切 换 到 下 一 个 页 面 的 效果 。 请 查 
看 我 们 的 jQuery Mobile 页 面 切换 章节 。 


规定 弹出 框 的 位 置 。Origin - 默认 。 定 位 弹 窗 
在 打开 它 的 链接 上 。jQuery selector - 定位 弹 
窗 在 指定 元 素 上 。Window - 定位 弹 窗 在 窗口 
屏幕 的 中 央 。 


带 有 data-role="listview" 的 <ol> 或 <ul>。 


Data- 


属性 


data-autodividers 


data-count- 


theme 


data-divider-theme 


data-filter 


data-filter- 


placeholder 


data-filter-theme 


data-icon 


data-inset 


data-split-icon 


data-split-theme 


data-theme 


列表 项 


值 
true | false 
letter (a-z) 
letter (a-z) 


true | false 
sometext 


letter (a-z) 


Icons 参考 手 
册 


true | false 


Icons 参考 手 
册 


letter (a-z) 


letter (a-z) 


描述 
网 定 是 否 自动 划分 列表 项 
网 定 计数 气泡 的 主题 颜色 。 默 认 是 "c 
部 定 列表 分 隔 的 主题 颜色 。 默 认 是 "b" 
网 定 是 否 在 列表 中 添加 搜索 杠 
定 搜索 框 内 的 文本 。 默认 是 "Filter 


items...' 


MER ROEM. BIE "c 


规定 列表 是 否 泻 染 成 圆 角 且 带 外 边 距 
规定 分 割 按钮 的 图 表 。 默 认 是 "arrow-r" 


规定 分 割 按钮 的 主题 颜色 。 默 认 是 "b" 
规定 列表 的 主题 颜色 


带 有 data-role="listview" 的 <ol> 或 «ul» 内 的 <li>, 


Data- 属 
性 


data- 
filtertext 
data- 
icon 
data- 
role 


data- 
theme 


值 


sometext 
Icons 参 
Fit 
list- 
divider 
letter (a- 
Z) 


描述 


规定 当 过 滤 元 素 时 要 搜索 的 文本 。 该 文本 将 会 被 过 滤 ， 
而 不 是 实际 的 列表 项 文本 


规定 列表 项 图 标 


规定 列表 项 的 分 隔 


规定 列表 项 的 主题 颜色 


注意 : data-icon 属性 只 作用 于 带 有 链接 的 列表 项 。 


导航 栏 


带 有 data-role="navbar" 容器 内 部 的 <li> 元 素 。 


lutorialsPoint 42 z/j !mZ 


Data- 属 性 值 描述 
data-icon Icons 参考 手册 规定 列表 项 的 图 标 
data-iconpos left | right | top | bottom | notext 规定 图 标的 位 置 


Y 导航 栏 从 他 们 的 父 容器 中 继承 了 主题 样本 。 为 导航 栏 设 置 data-theme E 
性 是 不 可 能 的 。 可 以 为 导航 栏 中 的 每 个 链接 单独 设置 data-theme 属性 。 


5 [8 


à data-role="page" 的 容器 。 


Ea fa 描述 
data- true | 
add- 自动 添加 后 退 按钮 ， 仅 限 头 部 栏 
false 
back-btn 
data- 
back- sometext ”规定 后 退 按钮 的 一 些 文本 
btn-text 
data- 
Dg) ORE SBR: a a 
theme 
data- 
close- id a 规定 对 话 框 上 关闭 按钮 的 一 些 文本 
btn-text 
data- TY 规定 是 否 清除 各 个 页 面 的 jQuery DOM 缓存 (如 果 设 
dom- false 置 为 true， 您 必须 自己 管理 DOM 并 在 所 有 移动 设备 
cache 上 进行 测试 ) 
data- 
overlay- Serl 规定 对 话 框 页 面 的 蒙 版 (背景) 颅 色 
theme 
data- letter (a- m bus a Kor = mw 
tham z) 规定 页 面 的 主题 颜色 。 默 认 是 "c 
data-tile ^ sometext 规定 页 面 标题 
data-url url 更 新 URL 的 值 ， 而 不 是 用 于 请 求 页 面 的 URL 


jQuery Mobile 


弹 窗 


带 有 data-role="popup" 的 容器 。 


Data- 属 性 
data-corners 


data-overlay- 
theme 


data-shadow 


data-theme 


data- 
tolerance 


8 data-rel="popup" 的 锚 : 


Data- 属 
性 


data- 
position- 
to 


值 


true | 
false 


letter (a- 
Z) 


true | 
false 


letter (a- 
Z) 


30, 15, 
30, 15 


值 


origin | jQuery 
selector | window 


data-rel popup 


Bt 
EH 


规定 弹 窗 是 否 圆 角 


规定 弹出 框 的 蒙 版 (GR) RA MEGS 
景 E) 


规定 弹出 框 是 否 有 阴影 


规定 弹出 框 的 主题 颜色 。 黑 认 是 继承 的 ，"none" 
设置 弹 窗 为 透明 的 


规定 窗口 边缘 (上 top. Fright. F bottom, Zr 
left) 的 距离 


TX 


Ef 


> 规定 弹出 框 的 位 置 。Origin - 默认 。 定 位 
弹 窗 在 打开 它 的 链接 上 。jQuery selector - 
定位 弹 窗 在 指定 元 素 上 。Window - 定位 弹 
窗 在 窗口 屏幕 的 中 央 。 


用 于 打开 弹出 框 


规定 一 个 页 面 切 换 到 下 一 个 页 面 的 效果 。 请 
查看 我 们 的 jQuery Mobile 页 面 切换 章节 。 


fade | flip | flow | 
N pop | slide | 
" slidedown | 
transition ligefade | slideup | 
turn | none 
xX x mo 
单 选 按钮 


带 有 type="radio" 的 成 双 成 对 的 label 和 input。 它 们 会 被 自动 泻 染 程 按 钮 样式 ， 
data-role 不 是 必需 的 。 


Data- 


属性 f 
data- true | 
mini false 
data- none 
role 
data- letter 
theme (a-z) 

9 如 需 组 合 


描 ; 


iE 


规定 按钮 是 小 尺寸 还 是 常规 尺寸 


防止 jQuery Mobile 泻 染 单 选 按钮 的 样式 为 增强 状态 的 按 
钮 ， 使 元 素 以 HTML 原生 的 状态 显示 


规定 单 选 按钮 的 主题 颜色 


多 个 单 选 按钮 ， 请 使 用 带 有 data-role-"controlgroup" 属性 和 


data-type-"horizontal|vertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 单 选 按钮 。 


选择 


所 有 的 <select> 元 素 。 这 些 会 


Data- 属 性 


data-icon 


data- 
iconpos 


data-inline 


data-mini 


data- 
native- 
menu 


data- 
overlay- 
theme 


data- 


placeholder 


data-role 


data-theme 


值 


Icons 参 
考 手 册 


left | right 


| top | 
bottom | 
notext 


true | 
false 


true | 
false 


true | 
false 


letter (a- 
Z) 


true | 
false 
none 


letter (a- 


Z) 


被 自动 泻 染 成 按钮 样式 ，date-role 是 不 必需 的 。 
描述 


规定 select 元 素 的 图 标 。 默 认 是 "arrow-d" 


规定 图 标的 位 置 


规定 select 元 素 是 否 内 联 


规定 select 元 素 是 小 尺寸 还 是 常规 尺寸 


当 设 置 为 false 时 ， 它 使 用 jQuery 自 带 的 自 定 义 的 
选择 菜单 (如 果 您 想 要 让 选择 菜单 在 所 有 的 移动 设 
各 上 都 显示 相同 ， 则 推荐 这 么 使 用 ) 


规定 jQuery 自 带 的 自 定义 的 选择 菜单 的 主题 颜色 
(与 data-native-menu-"false" 一 起 使 用 ) 


可 在 一 个 非 原生 的 选择 菜单 的 <option> 元 素 上 设 


E 
防止 jQuery Mobile 把 select 元 素 泻 染 成 按钮 样式 


规定 select 元 素 的 主题 颜色 


9 如 需 组合 多 个 select 元 素 ， 请 使 用 带 有 data-role-"controlgroup" 属性 和 
data-type-"horizontal|vertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 select 元 
=Æ 

素 。 


滑动 块 


带 有 type="range" 的 输入 框 。 这 些 会 被 自动 泻 染 成 按钮 样式 ，date-role 是 不 必需 
的 。 


Data- 属 性 值 描述 

data-highlight Tue | 规定 滑动 轨道 是 否 高 亮 突出 显示 

data-mini Hn 规定 滑动 块 是 小 尺寸 还 是 常规 尺寸 
false 

data-role none 防止 jQuery Mobile 泻 染 滑动 块 控件 为 按钮 样式 

Ne yu 

data-theme letter (a- 规定 滑动 块 控 件 〈 输 入 框 、 手 柄 和 轨道 ) WE 
Z) 题 颜 色 

data-track- letter (a- : 

theme z) 规定 滑动 块 轨道 的 主题 颜色 


文本 输入 框 & 文本 输入 域 


带 有 type-"text|search|etc." 的 input 或 textarea 元 素 。 这 些 会 被 自动 泻 染 成 按钮 样 
式 ，date-role 是 不 必需 的 。 


Data- 属 性 值 描述 
data-mini Hind 规定 输入 框 是 小 尺寸 还 是 常规 尺寸 
a eerie aoe 防止 jQuery Mobile 把 输入 框 /输入 域 泻 染 成 按钮 样 


工 


data- 


ae letter (a-z) ”规定 输入 字段 的 主题 颜色 


jQuery Mobile 图 标 


jQuery 图 标 
f£ jQuery Mobile 中 ， 如 需 为 按钮 添加 图 标 ， 请 使 用 data-icon 属性 : 


«a href="#anylink" data-role="button" **data-icon="refresh"**>Refre 


‘| = 








提示 : 在 «button» 或 «input» 元 素 中 ， 您 也 可 以 使 用 data-icon 属性 。 
下 面 我 们 列 出 了 jQuery Mobile 提供 的 所 有 可 用 图 标 : 


属性 值 描述 标 实例 

data-icon="arrow-|" 左 箭头 
data-icon-"arrow-r" 右 箭头 
data-icon="arrow-u" 上 箭头 
data-icon="arrow-d" 下 箭头 
data-icon="plus" 加 号 
data-icon="minus" 减 写 
data-icon="delete" 删除 
data-icon="check" 检查 
data-icon="home" 首页 
data-icon="info" 信息 | 
data-icon="grid" 网 格 
data-icon="gear" IR 
data-icon="search" 搜索 
data-icon-"back" 后 退 
data-icon="forward" 前 进 
data-icon="refresh" 更 新 
data-icon="star" 星 


data-icon="alert" 


jQuery Mobile 事件 


jQuery Mobile 事件 参考 手册 


以 下 列表 为 所 有 的 jQuery Mobile 事件 。 
注意 : 请 使 用 on() 方法 绑 定 事件 。 


事件 


hashchange 


navigate 


orientationchange 


pagebeforechange 


pagebeforecreate 
pagebeforehide 
pagebeforeload 


pagebeforeshow 


pagechange 


pagechangefailed 


pagecreate 
pagehide 
pageinit 


pageload 


描述 


启用 可 标记 #hash 历史 ， 哈 希 值 会 在 一 次 独立 的 点 击 时 
发 生 时 变化 ， 比 如 一 个 用 户 点 击 后 退 按钮 ， 会 通过 
hashchange fF st 7 4418, 


@ T hashchange 和 popstate 的 事件 
方向 改变 事件 ,在 用 户 垂直 或 者 水 平 旋转 移动 设备 时 触 
发 


o 


在 页 面 切换 之 前 ， 触 发 的 事件 。 使 用 

$.mobile.changePage() 来 切换 页 面 ， 此 方法 触发 2 个 事 
件 ， 切 换 之 前 的 pagebeforechange 事 件 ， 和 切换 完成 后 
pagechange (成 功 ) 或 者 pagechangefailed (Km) 。 


页 面 初始 化 时 ， 初 始 化 之 前 触发 。 

在 页 面 切换 后 旧 页 面 隐藏 之 前 ， 触 发 的 事件 。 
在 加 载 请 求 发 出 之 前 触发 

在 页 面 切换 后 显示 之 前 ， 触 发 的 事件 。 


在 页 面 切换 成 功 后 ， 触 发 的 事件 。 使 用 

$.mobile.changePage() 来 切换 页 面 ， 此 方法 触发 2 个 事 
件 ， 切 换 之 前 的 pagebeforechange 事 件 ， 和 切换 完成 后 
pagechange (成 功 ) 或 者 pagechangefailed (失败 ) 。 


在 页 面 切换 失败 时 ， 触 发 的 事件 。 使 用 

$.mobile.changePage() 来 切换 页 面 ， 此 方法 触发 2 个 事 
件 ， 切 换 之 前 的 pagebeforechange 事 件 ， 和 切换 完成 后 
pagechange (成 功 ) 或 者 pagechangefailed (Km) 。 


在 页 面 创建 成 功 之 后 ， 触 发 的 事件 ,但 增强 完成 之 前 。 
在 页 面 切换 后 老 页 面 隐藏 之 后 ， 触 发 的 事件 。 

在 页 面 页 面 初 始 化 时 ， 触 发 的 事件 。 

在 页 面 完 全 加 载 成 功 后 触发 。 


pageloadfailed 
pageremove 
pageshow 
scrollstart 
scrollstop 
swipe 
swipeleft 
swiperight 

tap 

taphold 
throttledresize 
updatelayout 
vclick 
vmousecancel 
vmousedown 
vmousemove 
vmouseout 
vmouseover 


vmouseup 


如 果 页 面 请 求 失败 触发 。 

在 窗口 视图 从 DOM 中 移 除外 部 页 面 之 前 触发 。 
在 过 渡 动画 完成 后 ， 在 "到 达 " 页 面 触发 。 

当 用 户 开始 滚动 页 面 时 触发 。 

当 用 户 停 止 滚动 页 面 时 触发 。 

当 用 户 在 元 素 上 水 平滑 动 时 触发 。 

当 用 户 从 左 划 过 元 素 超 过 30px 时 触发 。 

当 用 户 从 右 划 过 元 素 超过 30px 时 触发 。 

当 用 户 敲 击 某 元 素 时 触发 。 

当 元 素 敲 击 某 元 素 并 保持 一 秒 时 触发 。 
启用 可 标记 #hash 历史 记录 

由 动态 显示 /隐藏 内 容 的 jQuery Mobile 组 件 触发 。 
虚拟 化 的 click 事件 处 理 器 

虚拟 化 的 mousecancel 事件 处 理 器 

虚拟 化 的 mousedown 事件 处 理 器 

虚拟 化 的 mousemove 事件 处 理 器 

虚拟 化 的 mouseout 事件 义理 器 

虚拟 化 的 mouseover 事件 处 理 器 

虚拟 化 的 mouseup 事件 处 理 器 


jQuery Mobile 页 面 事件 


jQuery Mobile 页 面 事件 


在 jQuery Mobile 中 与 页 面 打 交道 的 事件 被 分 为 四 类 : 


e Page Initialization - 在 页 面 创建 前 ， 当 页 面 创 建 时 ， 以 及 在 页 面 初始 化 之 后 
e Page Load/Unload - 当 外 部 页 面 加载 时 、 外 载 时 或 遭遇 失败 时 

e Page Transition - 在 页 面 过 渡 之 前 和 之 后 
e Page Change - 当 页 面 被 更 改 ， 或 遭遇 失败 时 


如 需 关 于 所 有 jQuery Mobile 事件 的 完整 信息 ， 请 访问 我 们 的 jQuery Mobile 事件 
参考 手册 。 


jQuery Mobile Initialization 事件 


当 jQuery Mobile 中 的 一 张 典 型 页 面 进行 初始 化 时 ， 它 会 经 历 三 个 阶段 : 


。 在 页 面 创建 前 
。 页 面 创建 
e 页 面 初始 化 


每 个 阶段 触发 的 事件 都 可 用 于 插入 或 操作 代码 。 


事件 Hon 


当 页 面 即 将 初始 化 ， 并 且 在 jQuery Mobile 已 开始 增强 页 
面 之 前 ， 触 发 该 事件 。 


pagecreate 当 页 面 已 创建 ， 但 增强 完成 之 前 ， 触 发 该 事件 。 


当 页 面 已 初始 化 ， 并 且 在 jQuery Mobile 已 完成 页 面 增强 
之 后 ， 触 发 该 事件 。 


下 面 的 例子 演示 在 jQuery Mobile 中 创建 页 面 时 ， 何 时 触发 每 种 事件 : 


pagebeforecreate 


pageinit 


实例 


$(document).on("pagebeforecreate", function(event)( 
alert("fi&£Z£ pagebeforecreate#(4 ! "); 

3); 

$(document).on("pagecreate", function(event) { 

alert("fiBZ pagecreate BH !"); 

3); 

$(document) .on("pageinit", function(event ) { 
alert("fR& pageinit 事件 !") 

3): 


jQuery Mobile Load 事件 


页 面 加 载 事 件 属于 外 部 页 面 。 


无 论 外 部 页 面 何 时 载 人 DOM， 将 触发 两 个 事件 。 第 一 个 是 pagebeforeload， 第 二 
个 是 pageload (成 功 ) 或 pageloadfailed (Amst) 。 


下 表 中 解释 了 这 些 事件 : 
事件 描述 
pagebeforeload ”在 任何 页 面 加 载 请 求 作 出 之 前 触发 。 
pageload 在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 。 


如 果 页 面 加 载 请 求 失败 ， 则 触发 该 事件 。 默 认 地 ， 将 显示 


pageloadiallod. ep or Loading Page" 消息 。 


下 列 演 示 pageload 和 pagloadfailed 事件 的 工作 原理 : 
实例 
$(document).on("pageload", function(event, data) { 
alert(" 触 发 pageload 3/44! \nURL: " + data.url); 
$(document) .on("pageloadfailed", function(event, data){ 


alert("; 抱 次 ， 被 请 求 页 面 不 存在 。" ) ; 
3): 


jQuery Mobile 过 渡 事件 


我 们 还 可 以 在 从 一 页 过 渡 到 下 一 页 时 使 用 事件 。 


页 面 过 渡 涉 及 两 个 页 面 : 一 张 "来 "的 页 面 和 一 张 " 去 "的 页 面 - 这 些 过 渡 使 当前 活动 页 
面 〈" 来 的 "页 面 ) 到 新 页 面 ("去 的 "页 面 的 改变 过 程 变 得 更 加 动感 。 


事件 描述 


pagebeforeshow 在 "去 的 "页 面 触发 ， 在 过 渡 动 画 开始 前 。 
pageshow 在 "去 的 "页 面 触发 ， 在 过 渡 动 画 完成 后 。 
pagebeforehide 在 "来 的 "页 面 触发 ， 在 过 渡 动 画 开始 前 。 
pagehide 在 "来 的 "页 面 触发 ， 在 过 渡 动 画 完成 后 。 


下 列 演示 了 过 渡 时 间 的 工作 原理 : 
实例 


$(document).on("pagebeforeshow", "#pagetwo", function(){ // 当 进入 页 面 二 
alert(" 页 面 二 即将 显示 ")， 

}); 

$(document).on("pageshow", "#pagetwo", function(){ // 当 进 入 页 面 二 时 
alert(" 现 在 显示 页 面 二 " ) ; 

3); 

$(document).on("pagebeforehide","Zpagetwo",function()[ // 当 进 入 页 面 
alert(" 页 面 二 即将 隐藏 " ) ; 

}); 

$(document).on("pagehide", "#pagetwo",function(){ // When leaving pé 
alert(" 现 在 隐藏 页 面 二 "); 

}); 


E = E 





jQuery Mobile CSS # 


jQuery CSS X 

jQuery Mobile CSS 类 来 设置 不 同 元 素 的 样式 。 
以 下 列表 包含 了 通用 的 CSS 样式 : 

全 局 类 


以 下 类 可 以 在 jQuery Mobile 小 工具 中 使 用 (按钮 ， 工 具 条 ， 面 板 ， 表 格 ， 列 表 


o 


Class 描述 
ui-corner-all 为 元 素 添加 圆 角 
ui-shadow 为 元 素 添加 阴影 
ui-overlay-shadow 为 元 素 添加 多 层 阴影 
ui-mini 让 元 素 变 小 


按钮 类 


除了 全 局 类 外 ， 你 可 以 向 <a> 或 «button» 元 素 添加 以 下 类 (不 是 «input» 按钮 ): 


Class 描述 
ui-btn 添加 在 <a> 元 素 上 并 以 按钮 形式 展示 
ui-btn-inline — 在 同一 行 上 显示 按钮 


定位 图 标 在 按钮 文本 之 上 


EE 定位 图 标 在 按钮 文本 的 右边 


ui-btn-icon- Tm 
bottom 定位 图 标 在 按钮 文本 之 下 


Miicon | etry RTE CAR EU Ze d 


left 

ui-btn-icon- Demi 

notext 个 显示 图 标 

uibtn_alb PERMER. "a" 是 默认 的 (灰色 背景 黑色 文本 样式 ) "b" 修改 
颜色 为 黑色 背景 白色 文本 


所 有 可 用 图 片 的 类 用 在 <a> 和 «button» 元 素 上 (查看 jQuery Mobile 图 标 参考 手册 
了 解 如 何在 其 他 元 素 上 使 用 ): 


Class 图 标 描述 图 标 
ui-icon-action 动作 (一 般 用 于 页 面 跳 转 切 换 ) 
ui-icon-alert 三 角形 内 的 感叹 号 
ui-icon-audio 音响 /音箱 
ui-icon-arrow-d-l £ FART 
ui-icon-arrow-d-r A ARK 
ui-icon-arrow-u-l 左上 角 箭头 
ui-icon-arrow-u-r 右上 角 箭 头 
ui-icon-arrow-| 左 角 箭 头 


ui-icon-arrow-r AART 3: 


ui-icon-arrow-u 
ui-icon-arrow-d 
ui-icon-back 
ui-icon-bars 
ui-icon-bullets 
ui-icon-calendar 
ui-icon-camera 
ui-icon-carat-d 
ui-icon-carat-l 
ui-icon-carat-r 
ui-icon-carat-u 
ui-icon-check 
ui-icon-clock 
ui-icon-cloud 
ui-icon-comment 
ui-icon-delete 
ui-icon-edit 
ui-icon-eye 
ui-icon-forbidden 
ui-icon-forward 
ui-icon-gear 
ui-icon-grid 


ui-icon-heart 


向 上 箭头 

向 下 箭头 

返回 

三 条 水 平 线 ， 一 般 用 于 展示 列表 按钮 图 标 
用 于 展示 列表 按钮 图 标 
日 万 

相机 

向 下 滑动 图 标 

向 左 滑动 图 标 

向 右 滑动 图 标 

向 上 滑动 图 标 


1) b 


评论 / 消息 

删除 

编辑 / 铅笔 

眼睛 

禁用 标识 sign 

撤销 - (返回 上 一 步 ) 

齿轮 ， 一 般 用 于 设置 按钮 图 标 
网 格 

心 型 ， 可 用 于 文章 收藏 


Ui-icon-home 


ui-icon-info 
ui-icon-location 
ui-icon-lock 
ui-icon-mail 
ui-icon-minus 
ui-icon-navigation 
ui-icon-phone 
ui-icon-power 
ui-icon-plus 
ui-icon-recycle 
ui-icon-refresh 
ui-icon-search 
ui-icon-shop 
ui-icon-star 
ui-icon-tag 
ui-icon-user 


ui-icon-video 


主题 类 Classes 


锁 

邮件 / 信封 
减 号 

导航 

电话 

开关 (On/off) 
加 号 


循环 标识 


刷新 

搜索 / 放大 镜 
商店 /购物 袋 
星 号 

用 户 / 人 物 
视频 / 相机 


jQuery Mobile 提供 了 两 个 主题 类 : a ( 灰 ) 和 b ( 黑 )。 但 是 ， 你 可 以 创建 你 自己 的 自 
定义 类 - 可 定义 到 字母 "z” (查看 jQuery Mobile 主题 ) 。 下 表 列 出 了 可 用 的 主题 
X, 字母 (a-z) 意 为 样式 可 以 指定 a 到 z。 例 如 ui-bar-a 或 ui-bar-b 等 。 


Class 描述 
ui-bar-(a-z) ”指定 栏目 演示 - 头 部 ， 底 部 及 其 他 栏目 


ui-body-(a- ” ”指定 内 容 块 的 颜色 - 页 面 内 容 部 分 ( 1.4.0 版 本 已 废弃 ), 列表 视 
z) E, 28, Me, md, mek, gré. 


ui-btn-(a-z) ”指定 按钮 颜色 
ui-group- 
theme-(a-z) 
ui-overlay- 定义 了 页 面 背 景 颜色 ， 包 括 对 话 框 ， 漳 窗 和 其 他 出 现在 最 项 层 
(a-z) 的 页 面容 器 


ui-page- 
theme-(a-z) 


定义 了 控制 组 的 演示 listviews 和 collapsible 集合 


定义 了 页 面 演示 


网 格 类 


网 格 中 的 列 是 等 宽 的 (合计 是 100%) , RAW. BS. margin X padding, 这 
里 有 四 种 布局 网 格 可 供 使 用 : 


网 格 类 列 列 宽 对 应 实例 
ui-grid-solo — 1 10096 ui-block-a 
ui-grid-a 2 50% / 50% ui-block-a|b 
ui-grid-b 3 . 3396/3396/ 33% ui-block-a|b|c 
ui-grid-c 4 | 2596/25961 25% | 25% ui-block-a|b|c|d 
ui-grid-d 5 20% / 20% / 20% / 20% / 20% . ui-block-a|b|c|d|e 


更 多 信息 可 以 查看 jQuery Mobile 网 格 章节 。 


